Flutter: Multiple material widgets - android-studio

Question

[![enter image description here][1]][1]A little bit of a beginner question, but I have been messing with it for a long time and looking around without finding an answer.
I am using Flutter framework and I am trying to run multiple Stateless widgets, a bottom navigation bar and a top appbar to hold menu and other navigation buttons.
I am struggling to get both running at once and I can not find a way to run them both.
At the moment, when I call home:MyBottomNavigationBar only this appears and not the other(Makes sense) But what command or solution would help me run multiple widgets? I have tried tons of different ways to use home, but nothing seems to work.
My code is very simple. Just creating a Navigation bar and appbar with stf inside main.dart.
If needed I can attach the code, but hopefully my question is clear enough.
Done In Xamarin, I can have both BottomNavBar and Couple of Nav buttons at the top easily.
[1]: https://i.stack.imgur.com/Q2qXg.png
BottomNavBar.dart in Widgets folder
import 'dart:io';
class MyBottomNavigationBar extends StatefulWidget
{
#override
MyBottomNavigationBarState createState() => MyBottomNavigationBarState();
}
class MyBottomNavigationBarState extends State<MyBottomNavigationBar>
{
int _currentIndex = 0;
final List <Widget> _children =
[
HomePage(),
ExplorePage(),
ProgressPage(),
ChallengesPage(),
ProfilePage(),
];
void onTappedBar(int index)
{
setState((){
_currentIndex=index;
});
}
#override
Widget build(BuildContext context)
{
return new Scaffold
(
body: _children[_currentIndex],
bottomNavigationBar: BottomNavigationBar
(
onTap: onTappedBar,
currentIndex: _currentIndex,
items:
[
BottomNavigationBarItem
(
backgroundColor: Colors.pinkAccent,
icon: new Icon(Icons.home,
color: Colors.black),
label: 'Feed',
//activeBackgroundColor: Colors.red, // this is the change
),
main.dart
void main() async
{
WidgetsFlutterBinding.ensureInitialized();
runApp(MyApp());
}
/// This is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context)
{
MyBottomNavigationBar();
}
return MaterialApp(
title: _title,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home:HomePage()
);
}
}
And then I have a widget for a couple of buttons at the top appbar, but I can only run either BottomNavBar or The AppBar buttons. I would like to have them both working at the same time.

Answer 1

please put the code here, it would be helpful. I personally didn't understand what you're trying to achieve. every stateless/stateful has one build method which returns a widget (that has its own build method). However, as some widgets can have more than one child (row,column,stack), you can use your pre-built layout composition and then mount it to the widget tree.
Or, simply use your custom layout by extending CustomMultiChildLayout, you can also use "Overlay"-ing, to paint directly on the canvas based on an event or a state.
||||||||||||
new answer:
I tried to reproduced the image, basically you need to use scaffold's appBar and bottomNavigationBar properties. appbar is extending PreferredSizedWidget so you can easily create your own.
main.dart
void main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
MyBottomNavigationBar();
return MaterialApp(
title: _title,
home: HomePage(),
);
}
}
home_page.dart
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter version"),
actions: [
IconButton(icon: Icon(Icons.menu), onPressed: () {}),
IconButton(icon: Icon(Icons.account_circle), onPressed: () {}),
],
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.blue,
items: [
BottomNavigationBarItem(
backgroundColor: Colors.pinkAccent,
icon: new Icon(Icons.home, color: Colors.black),
label: 'Feed',
//activeBackgroundColor: Colors.red, // this is the change
),
BottomNavigationBarItem(
backgroundColor: Colors.pinkAccent,
icon: new Icon(Icons.home, color: Colors.black),
label: 'Feed',
//activeBackgroundColor: Colors.red, // this is the change
),
],
),
body: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height/7,
color: Colors.blue,
child: Center(child: Text("Challenges Page",style: TextStyle(fontSize: 41,color: Colors.white),),),
),
],
),
);
}
}
assuming you want to create your layout from scratch and don't want to use the scaffold's properties. the code blow is the same layout with stack, I didn't make it beautiful though, it just shows the layout without refactoring any widget.
code for home_page.dart (main.dart is the same as above)
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Stack(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height/12,
decoration: BoxDecoration(
color: Colors.blue,
boxShadow: [
BoxShadow(color: Colors.black54,blurRadius: 2,spreadRadius: .1,offset: Offset(0, 2)),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.all(18.0),
child: Text("just stack",style: TextStyle(fontSize: 21,color: Colors.white),),
),
],
),
Row(
children: [
IconButton(icon: Icon(Icons.account_circle,size: 32,), onPressed: (){}),IconButton(icon: Icon(Icons.settings,size: 32,), onPressed: (){}),
],
),
],
),
),
Positioned(
top: MediaQuery.of(context).size.height/12+1,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height/10,
color: Colors.blue,
child: Center(child: Text("Challenges Page",style: TextStyle(fontSize: 31,color: Colors.white),)),
),
),
Positioned(
bottom:0,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height/12,
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
children: [
IconButton(icon: Icon(Icons.home,size: 32,), onPressed: (){}),
Text("home"),
],
),
IconButton(icon: Icon(Icons.account_circle,size: 32,), onPressed: (){}),
IconButton(icon: Icon(Icons.settings,size: 32,), onPressed: (){}),
],
),
),
),
],
),
),
),
);
}
}