Flutter 底部导航仪标签的颤振抽屉
我仍然是颤振的初学者，我想创建一个带有侧抽屉和底部导航选项卡栏的颤振移动应用程序。我已经创建了带有侧抽屉和底部导航的应用程序，但我的问题是我想从抽屉和底部导航选项卡打开主页 现在抽屉正在打开主页，但没有显示底部导航器 这是我的密码 主飞镖Flutter 底部导航仪标签的颤振抽屉,flutter,dart,Flutter,Dart,我仍然是颤振的初学者，我想创建一个带有侧抽屉和底部导航选项卡栏的颤振移动应用程序。我已经创建了带有侧抽屉和底部导航的应用程序，但我的问题是我想从抽屉和底部导航选项卡打开主页 现在抽屉正在打开主页，但没有显示底部导航器 这是我的密码 主飞镖 import 'package:discover_me/screens/home.dart'; import 'package:discover_me/screens/search.dart'; import 'package:discover_me/tabs
import 'package:discover_me/screens/home.dart';
import 'package:discover_me/screens/search.dart';
import 'package:discover_me/tabs/tabspage.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
scaffoldBackgroundColor: Colors.white,
primaryColor: Colors.white
),
home: TabsPage(),
debugShowCheckedModeBanner: false,
routes: {
// '/': (context) => Home(),
'/home': (context) => Home(),
'/search': (context) => SearchPage(),
},
);
}
}
import 'package:flutter/material.dart';
import 'package:tabsdrawer/tabs/tabspage.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
scaffoldBackgroundColor: Colors.white, primaryColor: Colors.white),
home: TabsPage(selectedIndex: 0),
debugShowCheckedModeBanner: false,
);
}
}
import 'package:discover_me/shared/bottom_tabs.dart';
import 'package:flutter/material.dart';
class TabsPage extends StatefulWidget {
@override
_TabsPageState createState() => _TabsPageState();
}
class _TabsPageState extends State<TabsPage> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Scaffold(
body: IndexedStack(
index: _selectedIndex,
children: [
for (final tabItem in TabNavigationItem.items) tabItem.page,
],
),
// drawer: SideMenu(),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Business'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
import 'package:flutter/material.dart';
import 'package:tabsdrawer/tabs/bottom_tabs.dart';
class TabsPage extends StatefulWidget {
int selectedIndex = 0;
TabsPage({this.selectedIndex});
@override
_TabsPageState createState() => _TabsPageState();
}
class _TabsPageState extends State<TabsPage> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
widget.selectedIndex = index;
_selectedIndex = widget.selectedIndex;
print(_selectedIndex);
});
}
@override
void initState() {
_onItemTapped(widget.selectedIndex);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Scaffold(
body: IndexedStack(
index: widget.selectedIndex,
children: [
for (final tabItem in TabNavigationItem.items) tabItem.page,
],
),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text('Search'),
),
BottomNavigationBarItem(
icon: Icon(Icons.verified_user),
title: Text('Profile'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
import 'package:discover_me/screens/home.dart';
import 'package:discover_me/screens/search.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class TabNavigationItem {
final Widget page;
final Widget title;
final Icon icon;
TabNavigationItem({this.page, this.title, this.icon});
static List<TabNavigationItem> get items => [
TabNavigationItem(
page: Home(),
icon: Icon(Icons.home),
title: Text("Home"),
),
TabNavigationItem(
page: SearchPage(),
icon: Icon(Icons.home),
title: Text("Home"),
),
TabNavigationItem(
page: Home(),
icon: Icon(Icons.home),
title: Text("Home"),
),
];
}
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:tabsdrawer/screens/home.dart';
import 'package:tabsdrawer/screens/profile.dart';
import 'package:tabsdrawer/screens/search.dart';
class TabNavigationItem {
final Widget page;
final Widget title;
final Icon icon;
TabNavigationItem({this.page, this.title, this.icon});
static List<TabNavigationItem> get items => [
TabNavigationItem(
page: Home(),
icon: Icon(Icons.home),
title: Text("Home"),
),
TabNavigationItem(
page: Search(),
icon: Icon(Icons.search),
title: Text("Search"),
),
TabNavigationItem(
page: Profile(),
icon: Icon(Icons.home),
title: Text("Home"),
),
];
}
import 'package:discover_me/jsn_objects/visit_places.dart';
import 'package:discover_me/tabs/tabspage.dart';
import 'package:discover_me/widgets/side_menu.dart';
import 'package:flutter/material.dart';
import 'dart:convert';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
bool expanded = false;
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: SideMenu(),
appBar: AppBar(
leading: Builder(
builder: (BuildContext context) {
return RotatedBox(
quarterTurns: 1,
child: IconButton(
icon: Icon(
Icons.bar_chart_rounded,
color: Colors.black,
),
onPressed: () => Scaffold.of(context).openDrawer(),
),
);
},
),
backgroundColor: Colors.white,
elevation: 0.0,
actions: [
IconButton(
color: Colors.black,
icon: Icon(Icons.search),
onPressed: () {
Navigator.pushNamed(
context, '/search'
);
}),
],
),
body: Column(
children: [
Container(color: Colors.green, height: 100),
AnimatedContainer(
duration: const Duration(milliseconds: 200),
height: expanded ? 120 : 0,
child: Container(height: 120, color: Colors.red),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton(
heroTag: null,
child:
Icon(expanded ? Icons.arrow_upward : Icons.arrow_downward),
onPressed: () => setState(() {
expanded = !expanded;
}),
),
],
),
],
),
);
}
}
import 'package:flutter/material.dart';
import 'package:tabsdrawer/sidemenu/side_menu.dart';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: SideMenu(),
appBar: AppBar(
leading: Builder(
builder: (BuildContext context) {
return RotatedBox(
quarterTurns: 1,
child: IconButton(
icon: Icon(
Icons.bar_chart_rounded,
color: Colors.black,
),
onPressed: () => Scaffold.of(context).openDrawer(),
),
);
},
),
backgroundColor: Colors.white,
elevation: 0.0,
actions: [
IconButton(
color: Colors.black,
icon: Icon(Icons.search),
onPressed: () {
Navigator.pushNamed(context, '/search');
}),
],
),
body: Center(
child: Text('Home Page'),
),
);
}
}
我想从抽屉中调用带有底部导航的主页。您能帮我一下吗？它没有显示底部导航栏，因为您没有在主页中调用它。您可以创建一个通用的BottomNavigationBar，并在任何您想看到它的地方调用它，如果需要，您可以通过将其设置为provider来控制所选选项卡 所以基本上你的主页应该是这样的：
import 'package:discover_me/jsn_objects/visit_places.dart';
import 'package:discover_me/tabs/tabspage.dart';
import 'package:discover_me/widgets/side_menu.dart';
import 'package:flutter/material.dart';
import 'dart:convert';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
bool expanded = false;
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: SideMenu(),
appBar: AppBar(
leading: Builder(
builder: (BuildContext context) {
return RotatedBox(
quarterTurns: 1,
child: IconButton(
icon: Icon(
Icons.bar_chart_rounded,
color: Colors.black,
),
onPressed: () => Scaffold.of(context).openDrawer(),
),
);
},
),
backgroundColor: Colors.white,
elevation: 0.0,
actions: [
IconButton(
color: Colors.black,
icon: Icon(Icons.search),
onPressed: () {
Navigator.pushNamed(context, '/search');
}),
],
),
body: Column(
children: [
Container(color: Colors.green, height: 100),
AnimatedContainer(
duration: const Duration(milliseconds: 200),
height: expanded ? 120 : 0,
child: Container(height: 120, color: Colors.red),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton(
heroTag: null,
child:
Icon(expanded ? Icons.arrow_upward : Icons.arrow_downward),
onPressed: () => setState(() {
expanded = !expanded;
}),
),
],
),
],
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Business'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
但为每个页面创建新的底部导航栏并不好。我建议您创建一个通用的最后，我已经设法解决了我的问题 我已经向TabsPage添加了一个构造函数参数，并在从侧抽屉调用页面时传递该值 这是解决办法 主飞镖
import 'package:discover_me/screens/home.dart';
import 'package:discover_me/screens/search.dart';
import 'package:discover_me/tabs/tabspage.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
scaffoldBackgroundColor: Colors.white,
primaryColor: Colors.white
),
home: TabsPage(),
debugShowCheckedModeBanner: false,
routes: {
// '/': (context) => Home(),
'/home': (context) => Home(),
'/search': (context) => SearchPage(),
},
);
}
}
import 'package:flutter/material.dart';
import 'package:tabsdrawer/tabs/tabspage.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
scaffoldBackgroundColor: Colors.white, primaryColor: Colors.white),
home: TabsPage(selectedIndex: 0),
debugShowCheckedModeBanner: false,
);
}
}
import 'package:flutter/material.dart';
import 'package:tabsdrawer/tabs/tabspage.dart';
class SideMenu extends StatefulWidget {
@override
_SideMenuState createState() => _SideMenuState();
}
class _SideMenuState extends State<SideMenu> {
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
DrawerHeader(
child: Text(
'Discover Sri Lanka',
style: TextStyle(color: Colors.white, fontSize: 25),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0)),
color: Colors.white,
image: DecorationImage(
fit: BoxFit.fill, image: AssetImage('assets/sideimg.jpg'))),
),
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
onTap: () => {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => TabsPage(selectedIndex: 0)),
)
},
),
ListTile(
leading: Icon(Icons.search),
title: Text('Search'),
onTap: () => {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => TabsPage(selectedIndex: 1)),
),
},
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Profile'),
onTap: () => {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => TabsPage(selectedIndex: 2)),
),
},
),
],
),
);
}
}
import 'package:discover_me/shared/bottom_tabs.dart';
import 'package:flutter/material.dart';
class TabsPage extends StatefulWidget {
@override
_TabsPageState createState() => _TabsPageState();
}
class _TabsPageState extends State<TabsPage> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Scaffold(
body: IndexedStack(
index: _selectedIndex,
children: [
for (final tabItem in TabNavigationItem.items) tabItem.page,
],
),
// drawer: SideMenu(),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Business'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
import 'package:flutter/material.dart';
import 'package:tabsdrawer/tabs/bottom_tabs.dart';
class TabsPage extends StatefulWidget {
int selectedIndex = 0;
TabsPage({this.selectedIndex});
@override
_TabsPageState createState() => _TabsPageState();
}
class _TabsPageState extends State<TabsPage> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
widget.selectedIndex = index;
_selectedIndex = widget.selectedIndex;
print(_selectedIndex);
});
}
@override
void initState() {
_onItemTapped(widget.selectedIndex);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Scaffold(
body: IndexedStack(
index: widget.selectedIndex,
children: [
for (final tabItem in TabNavigationItem.items) tabItem.page,
],
),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text('Search'),
),
BottomNavigationBarItem(
icon: Icon(Icons.verified_user),
title: Text('Profile'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
import 'package:discover_me/screens/home.dart';
import 'package:discover_me/screens/search.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class TabNavigationItem {
final Widget page;
final Widget title;
final Icon icon;
TabNavigationItem({this.page, this.title, this.icon});
static List<TabNavigationItem> get items => [
TabNavigationItem(
page: Home(),
icon: Icon(Icons.home),
title: Text("Home"),
),
TabNavigationItem(
page: SearchPage(),
icon: Icon(Icons.home),
title: Text("Home"),
),
TabNavigationItem(
page: Home(),
icon: Icon(Icons.home),
title: Text("Home"),
),
];
}
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:tabsdrawer/screens/home.dart';
import 'package:tabsdrawer/screens/profile.dart';
import 'package:tabsdrawer/screens/search.dart';
class TabNavigationItem {
final Widget page;
final Widget title;
final Icon icon;
TabNavigationItem({this.page, this.title, this.icon});
static List<TabNavigationItem> get items => [
TabNavigationItem(
page: Home(),
icon: Icon(Icons.home),
title: Text("Home"),
),
TabNavigationItem(
page: Search(),
icon: Icon(Icons.search),
title: Text("Search"),
),
TabNavigationItem(
page: Profile(),
icon: Icon(Icons.home),
title: Text("Home"),
),
];
}
import 'package:discover_me/jsn_objects/visit_places.dart';
import 'package:discover_me/tabs/tabspage.dart';
import 'package:discover_me/widgets/side_menu.dart';
import 'package:flutter/material.dart';
import 'dart:convert';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
bool expanded = false;
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: SideMenu(),
appBar: AppBar(
leading: Builder(
builder: (BuildContext context) {
return RotatedBox(
quarterTurns: 1,
child: IconButton(
icon: Icon(
Icons.bar_chart_rounded,
color: Colors.black,
),
onPressed: () => Scaffold.of(context).openDrawer(),
),
);
},
),
backgroundColor: Colors.white,
elevation: 0.0,
actions: [
IconButton(
color: Colors.black,
icon: Icon(Icons.search),
onPressed: () {
Navigator.pushNamed(
context, '/search'
);
}),
],
),
body: Column(
children: [
Container(color: Colors.green, height: 100),
AnimatedContainer(
duration: const Duration(milliseconds: 200),
height: expanded ? 120 : 0,
child: Container(height: 120, color: Colors.red),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton(
heroTag: null,
child:
Icon(expanded ? Icons.arrow_upward : Icons.arrow_downward),
onPressed: () => setState(() {
expanded = !expanded;
}),
),
],
),
],
),
);
}
}
import 'package:flutter/material.dart';
import 'package:tabsdrawer/sidemenu/side_menu.dart';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: SideMenu(),
appBar: AppBar(
leading: Builder(
builder: (BuildContext context) {
return RotatedBox(
quarterTurns: 1,
child: IconButton(
icon: Icon(
Icons.bar_chart_rounded,
color: Colors.black,
),
onPressed: () => Scaffold.of(context).openDrawer(),
),
);
},
),
backgroundColor: Colors.white,
elevation: 0.0,
actions: [
IconButton(
color: Colors.black,
icon: Icon(Icons.search),
onPressed: () {
Navigator.pushNamed(context, '/search');
}),
],
),
body: Center(
child: Text('Home Page'),
),
);
}
}
嗨，@MiraçKılıç，我试过这个。但是仍然有同样的问题。正如我说的，你可以将你选择的索引设置为提供者，这样会更容易