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: (){}),
],
),
),
),
],
),
),
),
);
}
}
