Issue
Current State of the problem
UI:
Code:
How can I make only the yellow boxes… and keep the red box positioned as it is.
or any other alternative as I’m using a custom navigation container in the bottom and that cannot be scrolled.
Thank you.
Solution
Please refer to below code
class YellowBox extends StatefulWidget {
const YellowBox({Key key}) : super(key: key);
@override
_YellowBoxState createState() => _YellowBoxState();
}
class _YellowBoxState extends State<YellowBox> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("Hello World"),
),
bottomNavigationBar: Container(
height: 80.0,
width: ScreenUtil().screenWidth,
color: Colors.red,
),
body: Column(
children: [
Container(
height: 80.0,
width: ScreenUtil().screenWidth,
color: Colors.red,
),
Expanded(
child: ListView.builder(
itemCount: 10,
itemBuilder: (BuildContext ctx, int index) {
return Container(
margin:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
height: 80.0,
width: 100.0,
color: Colors.yellow,
);
},
),
),
],
),
);
}
}
Answered By – Tejaswini Dev
Answer Checked By – Timothy Miller (FlutterFixes Admin)