how can i use SingleChildScrollView in my code flutter? - flutter

hello My code for a page is like this. i need to scroll part below appbar.
_sheetController =
_scaffoldKey.currentState.showBottomSheet<void>((BuildContext context) {
return
DecoratedBox(
decoration: BoxDecoration(color: Theme.of(context).canvasColor),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40.0), topRight: Radius.circular(40.0)),
child:
Container(
child:
ListView(
children: <Widget>[
Container(
child: Stack(
children: <Widget>[
Positioned(
left: 10,
top: 10,
child: IconButton(
onPressed: () {
_loading = false;
Navigator.of(context).pop();
},
icon: Icon(
Icons.close,
size: 30.0,
color: Theme.of(context).primaryColor,
),
),
)
],
),
height: 50,
width: 50,
),
Form(
key: _formKey,
autovalidate: _autoValidate,
child:SingleChildScrollView(child:
Column(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: 140,
child: Stack(
children: <Widget>[
Positioned(
child: Align(
child: Container(
width: 130,
height: 130,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).primaryColor),
),
alignment: Alignment.center,
),
),
Positioned(
child: Container(
child: AutoSizeText(
"LOGIN",
maxLines: 1,
minFontSize:
MediaQuery.of(context).size.width/10.0,
maxFontSize:
MediaQuery.of(context).size.width/5.0,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
alignment: Alignment.center,
),
),
],
),
),
Padding(
padding: EdgeInsets.only(bottom: 20, top: 60),
child: CustomTextField(
onSaved: (input) {
_Email = input;
},
keyboardType: TextInputType.emailAddress,
validator: emailValidator,
icon: Icon(Icons.email),
hint: "EMAIL",
)),
CustomTextField(
icon: Icon(Icons.lock),
obsecure: true,
onSaved: (input) => _Password = input,
validator: (input) =>
input.isEmpty ? "*Required" : null,
hint: "PASSWORD",
),
Padding(
padding: EdgeInsets.only(right:
MediaQuery.of(context).size.width/1.96),
child: Container(
width: MediaQuery.of(context).size.width/2.310160428,
height: 40.0,
child:
FlatButton(
onPressed: resetSheet,
child: AutoSizeText("FORGOT PASWORD !" ,maxFontSize:
20.0,minFontSize: 10.0,maxLines: 1,),
),
)
),
SizedBox(
height: 10,
),
Padding(
padding: EdgeInsets.only(
left: 20,
right: 20,
bottom: MediaQuery.of(context).viewInsets.bottom),
child: _loading == true
? CircularProgressIndicator(
valueColor: new AlwaysStoppedAnimation<Color>(
Theme.of(context).primaryColor),
)
: Container(
child: filledButton(
"LOGIN",
Colors.white,
Theme.of(context).primaryColor,
Theme.of(context).primaryColor,
Colors.white,
_validateLoginInput),
height: 50,
width: MediaQuery.of(context).size.width,
),
),
SizedBox(
height: 20,
),
],
),
),
),
],
),
height: MediaQuery.of(context).size.height / 1.1,
width: MediaQuery.of(context).size.width,
color: Colors.white,
),
),
);
});
My code for a page is like this. i need to scroll part below appbar.
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(... ),
body: new Stack(
children: <Widget>[
new Container(
decoration: BoxDecoration(
image: DecorationImage(...),
new Column(children: [
new Container(...),
new Container(...... ),
new Padding(
child: SizedBox(
child: RaisedButton(..),
),
new Divider(),
new Column(
children: <Widget>[
new Container(
child: new Row(
children: <Widget>[
new Expanded(
child: new Text( ),
),
new IconButton(
icon: IconButton(..),
onPressed: () {
_changed(true, "type");
},
),
],
),
),
visibilityPropertyType
? new Container(
margin: EdgeInsets.all(24.0),
child: new Column(
children: <Widget>[
new Row(
children: <Widget>[
new Expanded(... ),
new RaisedButton(..)
],
),
new Padding(
padding: const EdgeInsets.only(top: 10.0),
child: new Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Column(
children: <Widget>[
new Row(
children: <Widget>[.. ]),
new Row(
children: <Widget>[]),
new Row(
children: <Widget>[]),
new Row(
children: <Widget>[],
),
new Column(
children: <Widget>[
new Row(
children: <Widget>[],
),
],
),
],
),
),
],
))
: new Container(),
],
),
new Divider(
color: Colors.white,
)
])
],
),
);
}
I need to make body part scrollable. How can i implement that scroll.
I think the SingleChildScrollView must work here but doesn't may i have issues in my code i try for alot times to find error but don't any help ?

Related

Flutter Layout Overflowing with Keyboard is active

I am trying to make a login page that looks like the below which is fine I have got the code to achieve this look, but the issue is when a field is active and the keyboard is present the overflow is shown
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
alignment: Alignment.center,
child: Image.asset(
'assets/images/logo.png',
alignment: Alignment.center,
height: 110,
width: 150,
),
),
)),
Expanded(
flex: 2,
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
TextFormField(
decoration: const InputDecoration(
hintText: 'Email',
prefixIcon: Icon(Icons.email_outlined)),
onSaved: (input) => _email = input,
),
const SizedBox(height: 20),
TextFormField(
decoration: const InputDecoration(
hintText: 'Password',
prefixIcon: Icon(Icons.lock_outlined)),
onSaved: (input) => _password = input,
obscureText: true,
),
const SizedBox(height: 20),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.lime,
minimumSize: const Size.fromHeight(50), // NEW
),
onPressed: _submit,
child: const Text(
'Sign In',
),
),
],
),
),
Column(
children: [
Text('Sign in with',
style: Theme.of(context)
.textTheme
.bodyMedium
.copyWith(fontWeight: FontWeight.bold)),
const SizedBox(
height: 12,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: 50,
height: 50,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(
width: 2, color: Colors.grey[350]),
),
child: Image.asset(
'assets/images/social/google.png',
height: 25)),
Container(
width: 50,
height: 50,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(
width: 2, color: Colors.grey[350]),
),
child: Image.asset(
'assets/images/social/facebook.png',
height: 25)),
Container(
width: 50,
height: 50,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(
width: 2, color: Colors.grey[350]),
),
child: Image.asset(
'assets/images/social/apple.png',
height: 25)),
]),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('Create a New Account?'),
TextButton(
onPressed: () => Navigator.push(
context,
MaterialPageRoute(builder: (_) => const SignupScreen()),
),
child: const Text(
'Go to Sign Up',
),
),
],
)
],
),
),
),
]),
);
}
}
Try to add your 2nd Column inside SingleChildScrollView hope its help to you.
Expanded(
flex: 2,
child: Form(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
//put your widget here
],
),
),
),
),
wrap your column with singlechildscrollview
body:singleChildScrollview(Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
alignment: Alignment.center,
child: Image.asset(
'assets/images/logo.png',
alignment: Alignment.center,
height: 110,
width: 150,
),
),
)),
Expanded(
flex: 2,
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
TextFormField(
decoration: const InputDecoration(
hintText: 'Email',
prefixIcon: Icon(Icons.email_outlined)),
onSaved: (input) => _email = input,
),
const SizedBox(height: 20),
TextFormField(
decoration: const InputDecoration(
hintText: 'Password',
prefixIcon: Icon(Icons.lock_outlined)),
onSaved: (input) => _password = input,
obscureText: true,
),
const SizedBox(height: 20),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.lime,
minimumSize: const Size.fromHeight(50), // NEW
),
onPressed: _submit,
child: const Text(
'Sign In',
),
),
],
),
),
Column(
children: [
Text('Sign in with',
style: Theme.of(context)
.textTheme
.bodyMedium
.copyWith(fontWeight: FontWeight.bold)),
const SizedBox(
height: 12,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: 50,
height: 50,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(
width: 2, color: Colors.grey[350]),
),
child: Image.asset(
'assets/images/social/google.png',
height: 25)),
Container(
width: 50,
height: 50,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(
width: 2, color: Colors.grey[350]),
),
child: Image.asset(
'assets/images/social/facebook.png',
height: 25)),
Container(
width: 50,
height: 50,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(
width: 2, color: Colors.grey[350]),
),
child: Image.asset(
'assets/images/social/apple.png',
height: 25)),
]),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('Create a New Account?'),
TextButton(
onPressed: () => Navigator.push(
context,
MaterialPageRoute(builder: (_) => const SignupScreen()),
),
child: const Text(
'Go to Sign Up',
),
),
],
)
],
),
),
),
]),)
Try using padding this way. hope this helps
Padding(
padding: MediaQuery.of(context).viewInsets,
child: Column(
children: <Widget>[
// your entire form widgets here
]
)
)

Flutter- The submit button won't go down, How do I move the submit button to bottom center

Here is part of the code that I made and This is the result that I get.
Widget _buildPage() {
return SafeArea(
child: Container(
decoration: BoxDecoration(color: Colors.grey[300]),
child: Form(
key: formkey,
child: Column(
children: <Widget>[
Container(
width: screenWidth,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 1.0, color: Colors.grey)),
color: Colors.white),
child: Padding(
padding: EdgeInsets.fromLTRB(
screenWidth * 0.05, 0, screenWidth * 0.03, 0),
child: Row(children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text('Craft',
style: TextStyle(
color: Colors.black,
fontSize: baseDimens.baseFontSize16,
fontWeight: FontWeight.bold))
],
),
Text('-',
style: TextStyle(
color: Colors.lightBlueAccent,
fontSize: baseDimens.baseFontSize16,
))
],
)
),
Visibility(
visible: true,
child: GestureDetector(
child: Image.asset(
baseAssets.addIcon,
fit: BoxFit.cover,
height: contHeight * 0.6,
width: contHeight * 0.6,
),
onTap: () async {
},
),
),
],
),
),
),
Container(
width: screenWidth,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 1.0, color: Colors.grey)),
color: Colors.white),
child: Padding(
padding: EdgeInsets.fromLTRB(
screenWidth * 0.05, 0, screenWidth * 0.03, 0),
child: Row(children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text('Labor',
style: TextStyle(
color: Colors.black,
fontSize: baseDimens.baseFontSize16,
fontWeight: FontWeight.bold))
],
),
Text('-',
style: TextStyle(
color: Colors.lightBlueAccent,
fontSize: baseDimens.baseFontSize16,
))
],
)
),
Visibility(
visible: true,
child: GestureDetector(
child: Image.asset(
baseAssets.addIcon,
fit: BoxFit.cover,
height: contHeight * 0.6,
width: contHeight * 0.6,
),
onTap: () async {
},
),
),
],
),
),
),
_label('Skill Level', '-'),
// Project Status
_label('Quantity', '0'),
// Location
_label('Regular Hours', '0'),
// Customer
_label('Required Date', 'DD/MM/YYYY'),
Visibility(
visible: true,
child: Align(
alignment: Alignment.bottomCenter,
child: Row(
children: [
Expanded(
child: TextButton(
onPressed: () async {
},
child: Text("Submit"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
baseColors.baseColor))),
)
],
),
),
),
],
),
),
),
);
}
}
}
The result that I expected was supposed to be the submit button at the bottom of the screen and still cannot figure out how to move it to bottom even after I used alignment bottom center. Any suggestion on what I should fix?
Align wont work here as it only takes the space column provides it. So add spacer before it. so that it pushes the button till the full height.
_label('Required Date', 'DD/MM/YYYY'),
Spacer(), //add here
Visibility(
visible: true,
child: Align(
alignment: Alignment.bottomCenter,
child: Row(
children: [
Expanded(
child: TextButton(
onPressed: () async {
},
child: Text("Submit"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
baseColors.baseColor))),
)
],
),
),
),
you can simply pass button in bottomNavigationBar as shown below:
scaffold(
body: ///your current code
bottomNavigationBar: Visibility(
visible: true,
child: Align(
alignment: Alignment.bottomCenter,
child: Row(
children: [
Expanded(
child: TextButton(
onPressed: () async {
},
child: Text("Submit"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
baseColors.baseColor))),
)
],
),
),
),
)
You can achieve it using Expanded().
Wrap you button with Expanded.
Example :
Expanded(
child: Visibility(
visible: true,
child: Align(
alignment: Alignment.bottomCenter,
child: Row(
children: [
Expanded(
child: TextButton(
onPressed: () async {},
child: Text("Submit"),
),
)
],
),
),
)),
You can create a child of SafeArea as Scaffold and pass that submit button in bottomSheet or bottomNavigationBar-
Widget _buildPage() {
return SafeArea(
child: Scaffold(
bottomSheet: Container( height:60, width:100, child: Visibility(
visible: true,
child: Align(
alignment: Alignment.bottomCenter,
child: Row(
children: [
Expanded(
child: TextButton(
onPressed: () async {},
child: Text("Submit"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
baseColors.baseColor))),
)
],
),
),
),
),
body: Container(
decoration: BoxDecoration(color: Colors.grey[300]),
child: Form(
key: formkey,
child: Column(
children: <Widget>[
Container(
width: screenWidth,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 1.0, color: Colors.grey)),
color: Colors.white),
child: Padding(
padding: EdgeInsets.fromLTRB(
screenWidth * 0.05, 0, screenWidth * 0.03, 0),
child: Row(children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text('Craft',
style: TextStyle(
color: Colors.black,
fontSize: baseDimens.baseFontSize16,
fontWeight: FontWeight.bold))
],
),
Text('-',
style: TextStyle(
color: Colors.lightBlueAccent,
fontSize: baseDimens.baseFontSize16,
))
],
)
),
Visibility(
visible: true,
child: GestureDetector(
child: Image.asset(
baseAssets.addIcon,
fit: BoxFit.cover,
height: contHeight * 0.6,
width: contHeight * 0.6,
),
onTap: () async {},
),
),
],
),
),
),
Container(
width: screenWidth,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 1.0, color: Colors.grey)),
color: Colors.white),
child: Padding(
padding: EdgeInsets.fromLTRB(
screenWidth * 0.05, 0, screenWidth * 0.03, 0),
child: Row(children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text('Labor',
style: TextStyle(
color: Colors.black,
fontSize: baseDimens.baseFontSize16,
fontWeight: FontWeight.bold))
],
),
Text('-',
style: TextStyle(
color: Colors.lightBlueAccent,
fontSize: baseDimens.baseFontSize16,
))
],
)
),
Visibility(
visible: true,
child: GestureDetector(
child: Image.asset(
baseAssets.addIcon,
fit: BoxFit.cover,
height: contHeight * 0.6,
width: contHeight * 0.6,
),
onTap: () async {},
),
),
],
),
),
),
_label('Skill Level', '-'),
// Project Status
_label('Quantity', '0'),
// Location
_label('Regular Hours', '0'),
// Customer
_label('Required Date', 'DD/MM/YYYY'),
],
),
),
),
),
);
}
}
}

Flutter - how to specific Card height

class CardContent extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.all(8.0),
height: 40,
child: Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Test Campaign',
style: TextStyle(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold,
),
),
LineButton(
onPress: () => null,
label: 'View',
height: 30,
backgroundColor: Colors.grey[300],
)
],
),
),
],
),
),
);
}
}
I have this piece of code that outputs this. Now this part it's only the content inside the tabs.
As you can see the Card goes all the way down. I want that Card to be about 50 pixel in height. How can I achieve that?
You just wrap your container just sniglechildScrollView.
SingleChildScrollView(
padding: EdgeInsets.all(8),
child: Column(
children: [
Container(
margin: const EdgeInsets.all(8.0),
height: 80,
child: Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Test Campaign',
style: TextStyle(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold,
),
),
LineButton(
onPress: () => null,
label: 'View',
height: 30,
backgroundColor: Colors.grey[300],
)
],
),
),
],
),
),
),
],
),
)

How To fixed container on Top While scrolling in Flutter

I want to fix my first container on Top when my card crossed on scrolling
And This is my code:
return SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new SizedBox(height: 25.0,),
new Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Text("Top Fix",style: TextStyle(fontSize: 20.0)),
new SizedBox(width: 30.0,),
new CircleAvatar(
backgroundColor: Colors.white,
radius: 25.0,
child: Text("A"),
),
],
),
color: Colors.orange,
),
new Container(
height: 200.0,
width: double.infinity,
child: Container(
margin: EdgeInsets.only(top: 40.0),
child: Text(
"Welcome To \n Flutter",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
),
decoration: BoxDecoration(
borderRadius: new BorderRadius.only(
bottomLeft: new Radius.circular(50.0),
bottomRight: new Radius.circular(50.0),
),
color: Colors.orange),
),
new Container(
margin: EdgeInsets.only(left: 10.0, right: 10.0),
transform: Matrix4.translationValues(0.0, -40.0, 0.0),
child: new Card(
clipBehavior: Clip.antiAlias,
color: Colors.orange[300],
child: Row(
children: [
new Container(
margin: EdgeInsets.all(5.0),
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 25.0,
child: Text("A"),
),
),
new Container(
child: Column(
children: [
new Text(
"Hello Every One This is Flutter Tutorial",
style: TextStyle(color: Colors.white),
),
new Container(
child: Row(
children: [
new FlatButton(
onPressed: () {},
textColor: Colors.white,
child: Text("Button 1")),
new FlatButton(
onPressed: () {},
textColor: Colors.white,
child: Text("Button 1")),
],
)),
],
)),
],
),
elevation: 2.0,
),
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 1"),
),
),
new SizedBox(
height: 40,
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 2"),
),
),
new SizedBox(
height: 40,
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 3"),
),
),
],
),
// ),
);
I want to fix my first container and also change my color orange to green.
You can use stack like this:
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final double heightOfFirstContainer = 100.0;
#override
Widget build(BuildContext context) {
return SafeArea(
child: Stack(
children: [
Scaffold(
backgroundColor: Colors.green,
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: heightOfFirstContainer,
),
new Container(
height: 200.0,
width: double.infinity,
child: Container(
margin: EdgeInsets.only(top: 40.0),
child: Text(
"Welcome To \n Flutter",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
),
decoration: BoxDecoration(
borderRadius: new BorderRadius.only(
bottomLeft: new Radius.circular(50.0),
bottomRight: new Radius.circular(50.0),
),
color: Colors.orange),
),
new Container(
margin: EdgeInsets.only(left: 10.0, right: 10.0),
transform: Matrix4.translationValues(0.0, -40.0, 0.0),
child: new Card(
clipBehavior: Clip.antiAlias,
color: Colors.orange[300],
child: Row(
children: [
new Container(
margin: EdgeInsets.all(5.0),
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 25.0,
child: Text("A"),
),
),
new Container(
child: Column(
children: [
new Text(
"Hello Every One This is Flutter Tutorial",
style: TextStyle(color: Colors.white),
),
new Container(
child: Row(
children: [
new FlatButton(
onPressed: () {},
textColor: Colors.white,
child: Text("Button 1")),
new FlatButton(
onPressed: () {},
textColor: Colors.white,
child: Text("Button 1")),
],
)),
],
)),
],
),
elevation: 2.0,
),
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 1"),
),
),
new SizedBox(
height: 40,
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 2"),
),
),
new SizedBox(
height: 40,
),
new Card(
clipBehavior: Clip.antiAlias,
color: Colors.grey[200],
child: Container(
height: 200.0,
width: double.infinity,
child: Text("Card 3"),
),
),
],
),
// ),
),
),
Positioned(
child: new Container(
height: heightOfFirstContainer,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Text("Top Fix", style: TextStyle(fontSize: 20.0)),
new SizedBox(
width: 30.0,
),
new CircleAvatar(
backgroundColor: Colors.white,
radius: 25.0,
child: Text("A"),
),
],
),
color: Colors.orange,
),
),
],
),
);
}
}

displaying matching id , flutter

I'm new to flutter, I'm trying to show cards in categories, I've made a module with the categories and items, including id for the categories and matching id for the item(one item can be in multiple categories ) but I don't know how to sort them
this is the main screen
Widget _buildIcon(int index) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: GestureDetector(
onTap: () {
setState(() {
_selectedIndex = index;
String id = DUMMY_CATEGORIES[index].id;
print(id);
});
},
child: Container(
height: 45,
width: 100,
decoration: BoxDecoration(
color: _selectedIndex == index
? Color.fromRGBO(126, 214, 223, 0.5)
: Color.fromRGBO(200, 214, 229,0.3),
borderRadius: BorderRadius.circular(80)),
child: Center(
child: Text(
DUMMY_CATEGORIES[index].title, style: TextStyle(color: _selectedIndex==index ?Color.fromRGBO(16, 172, 132, 1) : Colors.black, ),
),
),
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
Column(
children: <Widget>[
Container(
padding: EdgeInsets.only(right: 10, top: 20),
alignment: Alignment.topRight,
child: IconButton(
icon: Icon(
Icons.search,
size: 25,
),
)),
Container(
padding: EdgeInsets.only(left: 10),
alignment: Alignment.topLeft,
child: Text(
'Make it Bread',
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
)),
],
),
SizedBox(
height: 30,
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: DUMMY_CATEGORIES
.asMap()
.entries
.map((MapEntry map) => _buildIcon(map.key))
.toList()
),
),
NewMealIteam(),
],
),
);
}
}
and this is the item
Widget build(BuildContext context) {
return Padding(padding: EdgeInsets.symmetric(horizontal: 10, vertical: 45),
child: Container(
height: 450,
//color: Colors.orange,
child: ListView.builder(itemCount: mealList.length,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context ,int index){
Meal mealLists = mealList[index];
return Container(
width: 280,
child: Stack(children: <Widget>[
Container(
height: 450,
margin: EdgeInsets.all(10),
padding: EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),
color: Colors.red,
image: DecorationImage(
image: AssetImage('assets/dough.png'
),fit: BoxFit.fill
),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 2.0,
spreadRadius: 0.0,
offset: Offset(3.0, 2.0), // shadow direction: bottom right
)
],),
),
Positioned(bottom :20 ,left: 20,child: Column(
children: <Widget>[
Container(width: 170,
padding: EdgeInsets.symmetric(vertical: 25),
child: Text(mealLists.title,style: TextStyle(color:Colors.white,fontSize: 32),textAlign: TextAlign.start,overflow: TextOverflow.fade
,),
),
Padding(
padding: EdgeInsets.all(2),
child: Container(width:220,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row( mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.schedule),
SizedBox(
width: 6,
),
Text('${mealLists.duration} min'),
],
),
Row( mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.work),
SizedBox(
width: 8,
),
],
),
Row( mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.monetization_on),
SizedBox(
width: 6,
),
// Text('${durations} min'),
],
),
],
),
),
)
],
))
],),
);
},
),
),
);
}
}
this is example for the module list
Category(
id: 'c1',
title: 'sour bread',
),
Meal(
id: 'm1',
categories: [
'c1',
'c2',
],
title: 'Sour Dough',
),
thanks