Navigation at the top with active icons? - flutter

Question

Firstly I used AppBar to change pages, but I noticed BottomNavBar has better properties to do that. But it would be great if someone gave me a clue to create navigation at the top of the screen.
This BottomNavBar doesn't work, gives error 'each child must be laid once':
Widget build(BuildContext context) {
return new Scaffold(
//appBar: bar(context),
body: new Container(
key: _formKey,
padding: const EdgeInsets.all(30),
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: BottomNavigationBar(
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: const Icon(Icons.home), title: new Text("Home")),
new BottomNavigationBarItem(
icon: const Icon(Icons.work),
title: new Text("Self Help")),
new BottomNavigationBarItem(
icon: const Icon(Icons.face),
title: new Text("Profile"))
],
selectedItemColor: colorGold,
)),
],
),
),
);
}
}
And this is my AppBar where I tried to change color of the active icon:
AppBar(
automaticallyImplyLeading: false,
title: Center(
child: Row(mainAxisAlignment: MainAxisAlignment.center, children: <
Widget>[
iconButton(
Icons.home,
),
iconButton(
Icons.work,
),
iconButton(
Icons.face,
)),]))```

Answer 1

If I'm not wrong , you are supposing to this:
Use PreferredSize widget in your app bar
Full code:
class TabBarHomeScreen extends StatefulWidget {
#override
_TabBarHomeScreenState createState() => _TabBarHomeScreenState();
}
class _TabBarHomeScreenState extends State<TabBarHomeScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Top Navigation tab bar demo"),
),
body: TopNavigationBar(),
);
}
}
class TopNavigationBar extends StatefulWidget {
#override
_TopNavigationBarState createState() => _TopNavigationBarState();
}
class _TopNavigationBarState extends State<TopNavigationBar> with SingleTickerProviderStateMixin {
int tabIndex = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar:PreferredSize(
preferredSize: Size.fromHeight(kToolbarHeight),
child: BottomNavigationBar(
//elevation: 0.0,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home, color: Colors.grey,),
activeIcon: Icon(Icons.home, color: Colors.blue,),
title: Text('')
),
BottomNavigationBarItem(
icon: Icon(Icons.mail, color: Colors.grey,),
activeIcon: Icon(Icons.mail, color: Colors.blue,),
title: Text('')
),
BottomNavigationBarItem(
icon: Icon(Icons.account_circle, color: Colors.grey,),
activeIcon: Icon(Icons.account_circle, color: Colors.blue,),
title: Text('')
)
],
currentIndex: tabIndex,
selectedItemColor: Colors.blueAccent,
onTap: (int index){
setState(() {
tabIndex = index;
});
},
),
),
body: Container(
color: Colors.white,
child: tabIndex ==0 ?MyHomeScreen()
:tabIndex == 1? MyMailScreen(): MyProfileScreen()
),
);
}
}
class MyHomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child:Text("My Home Screen")
),
);
}
}
class MyMailScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child:Text("My Mail Screen")
),
);
}
}
class MyProfileScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child:Text("My Profile Screen")
),
);
}
}