![](/img/trans.png)
[英]how to create bottom nav bar with dynamic floating action button with good animation flutter?
[英]how to create floating button bar in flutter?
我想在 flutter 中創建一個浮動按鈕欄,類似於共享的圖像中顯示的floating bottom bar
上圖來自依賴https://pub.dev/packages/floating_bottom_navigation_bar ,這是用於頁面導航,但我不希望導航只希望在按下按鈕時執行操作,並且視圖應該是相同的。
您可以在下面復制粘貼運行完整代碼
您不需要將頁面導航邏輯放入其中,視圖將相同
可以直接查看onTap
知道用戶點擊了哪個按鈕
bottomNavigationBar: FloatingNavbar(
onTap: (int val) {
switch (val) {
case 0:
{
action = "Home";
}
break;
工作演示
完整代碼
import 'package:floating_bottom_navigation_bar/floating_bottom_navigation_bar.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
// This widget is the root of your application.
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _index = 0;
String action = "Home";
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Floating NavBar Example',
home: Scaffold(
appBar: AppBar(
title: Text('Floating NavBar Example'),
centerTitle: true,
),
//If you want to show body behind the navbar, it should be true
extendBody: true,
body: Center(
child: Column(
children: [
Text(
"index: $_index",
style: TextStyle(
fontSize: 52,
),
),
Text("$action"),
],
),
),
bottomNavigationBar: FloatingNavbar(
onTap: (int val) {
switch (val) {
case 0:
{
action = "Home";
}
break;
case 1:
{
action = "Explore"; //statements;
}
break;
case 2:
{
action = "Chats"; //statements;
}
break;
case 3:
{
action = "Settings"; //statements;
}
break;
default:
{
//statements;
}
break;
}
setState(() => _index = val);
},
currentIndex: _index,
items: [
FloatingNavbarItem(icon: Icons.home, title: 'Home'),
FloatingNavbarItem(icon: Icons.explore, title: 'Explore'),
FloatingNavbarItem(icon: Icons.chat_bubble_outline, title: 'Chats'),
FloatingNavbarItem(icon: Icons.settings, title: 'Settings'),
],
),
),
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.