Как изменить тело скаффолда в зависимости от того, какая кнопка панели навигации нажата во флаттере?
Я новичок в флаттере, и я хочу сделать это должным образом, дело в том, что у меня есть пакет нижней панели навигации. i https://pub.dev/packages/curved_navigation_bar у нее потрясающий вид и анимация, эта панель навигации должна изменять тело виджета Scaffold и открываться каждый раз новый виджет в зависимости от нажатой кнопки, я пытаюсь достичь каждый раз, когда нажимается кнопка на панели навигации, и делаю следующее:
- очистить тело от
Scaffold
- загрузить связанный виджет
Надеюсь, это правильный подход к навигации (изменение экрана или вида), если это не так, скажите мне
class _SituationState extends State<ScreenSituation>{
int _page = 0;
GlobalKey _bottomNavigationKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
//if list button is clicked preveiw widget_client
//if people button is clicked preveiw widget_people
//if launch button is clicked preveiw launch
),
bottomNavigationBar: CurvedNavigationBar(
key: _bottomNavigationKey,
index: 0,
height: 75.0,
items: <Widget>[
Icon(Icons.list, size: 30),
Icon(Icons.people, size: 30),
Icon(Icons.launch, size: 30),
],
color: Colors.white,
buttonBackgroundColor: Colors.white,
backgroundColor: Colors.blueAccent,
animationCurve: Curves.easeInOut,
animationDuration: Duration(milliseconds: 300),
onTap: (index) {
setState(() {
_page = index;
});
},
),
);
}
}
1 ответ
Решение
Получение вашего примера кода.
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _page = 0;
GlobalKey _bottomNavigationKey = GlobalKey();
Widget bodyFunction() {
switch (_page) {
case 0:
return Container(color: Colors.red);
break;
case 1:
return Container(color: Colors.blue);
break;
case 2:
return Container(color: Colors.orange);
break;
default:
return Container(color: Colors.white);
break;
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: bodyFunction(),
bottomNavigationBar: CurvedNavigationBar(
key: _bottomNavigationKey,
index: 0,
height: 75.0,
items: <Widget>[
Icon(Icons.list, size: 30),
Icon(Icons.people, size: 30),
Icon(Icons.launch, size: 30),
],
color: Colors.white,
buttonBackgroundColor: Colors.white,
backgroundColor: Colors.blueAccent,
animationCurve: Curves.easeInOut,
animationDuration: Duration(milliseconds: 300),
onTap: (index) {
setState(() {
_page = index;
});
},
),
);
}
}