Apparently i tried to make a bottom button for checkout and it seems to be affecting how the body of the app is working. This only happened after i added the bottomnavbar padding etc
heres the link for the snip: https://imgur.com/a/sDhqasr
class _State extends State<CartOverviewScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Your Cart'),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Center(child: Text('HI!'),)
],
),
),
bottomNavigationBar: Padding(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Card(
margin: EdgeInsets.all(15),
child: Padding(
padding: EdgeInsets.all(8),
child: Row(
children: <Widget>[
Text(
'Total',
style: TextStyle(
fontSize: 20,
),
),
SizedBox(width: 10,),
Chip(label: Text('\$0.00'),)
],
),
),
),
ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(
elevation: 8,
onPressed: () {},
color: colorCustom,
textColor: Colors.white,
child: Text('Checkout'),
),
),
],
),
),
);
}
}
you can also try this
class _State extends State<stat> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Your Cart'),
),
body: Column(
children: <Widget>[
Expanded(
child: Center(
child: Text("Hi"),
),
)
],
),
bottomNavigationBar: Padding(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Card(
margin: EdgeInsets.all(15),
child: Padding(
padding: EdgeInsets.all(8),
child: Row(
children: <Widget>[
Text(
'Total',
style: TextStyle(
fontSize: 20,
),
),
SizedBox(
width: 10,
),
Chip(
label: Text('\$0.00'),
)
],
),
),
),
ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(
elevation: 8,
onPressed: () {},
color: Colors.red,
textColor: Colors.white,
child: Text('Checkout'),
),
),
],
),
),
);
}
}
Ahh i found my own answer actually, the problem was caused by bottomNavigationBar hogging the entire body of the app. i just needed to place the following code from below onto the bottomNavigationBar Column.
mainAxisSize: MainAxisSize.min
Related
I am new to flutter. And I'm gaining more and more knowledge in a flutter.
I make A login screen long before for my Project But Someone suggest that your login screen not be scrolled up words should stick in the same position.
Brief about my screen.--
I added singleChildScrollview.I want to stop scrolling
below is my login screen. dart
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
),
body: Center(
child: SingleChildScrollView(
child: Container(
color: Colors.white12,
child: Padding(
padding: const EdgeInsets.all(36.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 200,
child: Image.asset(
"assests/man.png",
fit: BoxFit.contain,
)),
SizedBox(height: 45),
emailField,
SizedBox(height: 25),
passwordField,
SizedBox(height: 35),
loginButton,
SizedBox(height: 15),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Don't have an account ? "),
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
RegistrationScreen()));
// Navigator.push(context, MaterialPageRoute(builder:(context)=>HomeScreen()));
},
child: Text(
"SignUp",
style: TextStyle(
color: Colors.redAccent,
fontWeight: FontWeight.w600,
fontSize: 15,
),
),
)
],
),
],
),
),
),
),
),
),
);
Remove SingleChildScrollview
Like this
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
),
body: Center(
child: Container(
color: Colors.white12,
child: Padding(
padding: const EdgeInsets.all(36.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 200,
child: Image.asset(
"assests/man.png",
fit: BoxFit.contain,
)),
SizedBox(height: 45),
emailField,
SizedBox(height: 25),
passwordField,
SizedBox(height: 35),
loginButton,
SizedBox(height: 15),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Don't have an account ? "),
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
RegistrationScreen()));
// Navigator.push(context, MaterialPageRoute(builder:(context)=>HomeScreen()));
},
child: Text(
"SignUp",
style: TextStyle(
color: Colors.redAccent,
fontWeight: FontWeight.w600,
fontSize: 15,
),
),
)
],
),
],
),
),
),
),
),
);
Add physics to SingleChildScrollView
return SingleChildScrollView(
physics: const NeverScrollableScrollPhysics(),
// rest of the code here
);
Though i would not recommend it as if the screen size is small and if the keyboard opens up, a render overflow will occur.
So, here is my code for the GridView. I'm already tried to use InkWell but it does not navigate to the page that is specified. I don't know what is the problem as I am new in coding world. I also try restructure the code but as I said I am new so the code always got some error here and there. I hope i can get some help in solving this problem. Thank you all.
class _DashboardState extends State<Dashboard> {
Material myItems(IconData icon, String heading, int color) {
return Material(
color: Colors.white,
elevation: 14.0,
shadowColor: Color(0x802196F3),
borderRadius: BorderRadius.circular(20.0),
child: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//text
Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
heading,
style: TextStyle(
color: new Color(color),
fontSize: 20.0,
),
),
),
),
//icon
Material(
color: new Color(color),
borderRadius: BorderRadius.circular(24.0),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Icon(
icon,
color: Colors.white,
size: 30.0,
),
),
),
],
)
],
),
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Dashboard',
style: TextStyle(
color: Colors.white,
),
),
),
body: Container(
padding: EdgeInsets.all(16.0),
child: StaggeredGridView.count(
crossAxisCount: 1,
mainAxisSpacing: 12.0,
padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
children: <Widget>[
myItems(
Icons.report,
"Report",
0x802196F3),
myItems(
Icons.insert_chart,
"Chart",
0x802196F3),
myItems(
Icons.format_list_numbered,
"Ranking",
0x802196F3),
],
staggeredTiles: [
StaggeredTile.extent(1, 130),
StaggeredTile.extent(1, 130),
StaggeredTile.extent(1, 130)
],
),
),
);
}
}
I tried adding an Inkwell with a simple print statement to one of your tiles and it worked, clicking on report prints hello in the console.
children: <Widget>[
InkWell(
onTap: () {
print('hello!');
},
child: myItems(Icons.report, "Report", 0x802196F3),
),
myItems(Icons.insert_chart, "Chart", 0x802196F3),
myItems(Icons.format_list_numbered, "Ranking", 0x802196F3),
],
),
Anybody how to do the layout similar to the image? I am having difficulty on the CardView and it position is lies between the body. I am still consider quite new to Flutter, having some difficulty in UI part. Full code is as below:
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: PreferredSize(
preferredSize: Size.fromHeight(45.0),
child: AppBar(
automaticallyImplyLeading: false,
elevation: 0.0,
centerTitle: true,
backgroundColor: Color(0xFFED2849),
leading: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
margin: const EdgeInsets.only(left: 8.0),
child: GestureDetector(
onTap: (){
Navigator.of(context).pop(null);
},
child: Image.asset('assets/ic_user_title_back.png', width: 12.0, height: 12.0,),
),
),
],
),
title: Center(
child: Container(
child: Text(
'账号中心',
style: TextStyle(color: Color(0xFFFFFFFF), fontSize: 14),
),
),
),
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: GestureDetector(
onTap: (){
//logout
},
child: Text(
'退出登陆',
style: TextStyle(color: Color(0xFFFFFFFF), fontSize: 11),
),
),
),
],
),
)
],
)
),
body: SafeArea(
top: false,
child: Material(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 3,
child: Container(
color: Color(0xFFED2849),
),
),
Expanded(
flex: 7,
child: Container(
color: Color(0xFFF1F1F1),
),
)
],
),
),
)
);
}
You can do this using Stack
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(
// fit: StackFit.expand,
children: [
Column(
children: [
Expanded(
flex: 3,
child : Container(color: Colors.red)
),
Expanded(
flex: 7,
child: Container(
color : Colors.white)
)
]
),
Positioned(
top: MediaQuery.of(context).size.height * 0.2,
left: 20,
right: 20,
child:Card(
child: Padding(
padding : const EdgeInsets.all(16),
child: Text("Your Text here", ),
),)
)
],
)
Try using Stack() it will allow you to overlap several children in a simple way.
I am struggling to understand how to layout my widget so that they are occupying the entire yellow space. More specifically I would like that the "hero' and the "boss" widget expand to occupy the available space on screen (excluding the keyboard)
My current code achieve the following result
I would like to get the following result below
Here is my code. I have used resizeToAvoidBottomInset: true to ensure the widget is resized with the keyboard popping up
Widget build(BuildContext context) {
return Container(
child: Scaffold(
resizeToAvoidBottomInset: true,
backgroundColor: kColorPrimary,
appBar: AppBar(
backgroundColor: kColorPrimaryLight,
title: Text('Time to Spell'),
),
body: ModalProgressHUD(
inAsyncCall: showSpinner,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
child: Container(
height: 100,
color: Colors.amberAccent,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
color: Colors.blue,
child: Text(
result,
textAlign: TextAlign.center,
style: kTitleTextStyle,
),
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.blue,
child: Text(
'Timer: 2:00',
textAlign: TextAlign.center,
),
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Container(
height: 279,
color: Colors.purple,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.white,
child: Text(
'Hero',
textAlign: TextAlign.center,
),
),
),
),
),
Expanded(
child: Container(
height: 279,
color: Colors.greenAccent,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.white,
child: Text(
'Boss',
textAlign: TextAlign.center,
),
),
),
),
),
],
),
],
),
),
),
],
),
),
))));
}
Try this. I have added comments as well. Feel free to comment if anything is not clear.
#override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
color: Colors.amberAccent,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
color: Colors.blue,
child: Text(
"Click start",
textAlign: TextAlign.center,
),
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.blue,
child: Text(
'Timer: 2:00',
textAlign: TextAlign.center,
),
),
),
],
),
Expanded(
child: Row(
children: <Widget>[
//child 1 of row takes half of the space
Expanded(
child: Column(
children: <Widget>[
//expanding the container to the bottom
Expanded(
child: Container(
//maximizing the width of the container
width: double.infinity,
color: Colors.purple,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.white,
child: Text(
'Hero',
textAlign: TextAlign.center,
),
),
),
),
),
],
),
),
//child 2 of row takes half of the space
Expanded(
child: Column(
children: <Widget>[
//expanding the container to the bottom
Expanded(
child: Container(
//maximizing the width of the container
width: double.infinity,
color: Colors.greenAccent,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.white,
child: Text(
'Boss',
textAlign: TextAlign.center,
),
),
),
),
),
],
),
),
],
),
),
],
),
),
);
}
Current output:
Expected output:
Code:
SizedBox(
width: 380,
height: 180,
child: Swiper(
itemCount: items.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
Expanded(
child: Card(
child: ListTile(
title: Text(
'${items[index].title}',
),
subtitle: Text(
'${items[index].body}',
),
trailing: Column(
children: <Widget>[
CircleAvatar(
backgroundColor: HexColor("#0087a8"),
child: IconButton(
icon: Icon(Icons.add),
],
),
),
),
)
],
);
},
viewportFraction: 0.8,
scale: 0.9,
control: SwiperControl(color: Colors.white),
),
);
I am unable to create the icon button to be that way. As when i put in padding, it says that the pixels overflowed. I need to get the add button on the bottom right hand side.
As already pointed out, you shouldn't use a ListTile for this, as you want to use more than just a title, subtitle for your content.
The reason I've picked a Stack over a Column here, is that it allows you to safely use it in different size screens whilst assuring the view won't overflow. With Column, it would use the button diameter as the whole space to use (vertically), even though it is restrict to the right side of the box.
I believe this is what you're looking for.
class MyListTile extends StatelessWidget {
const MyListTile({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: 180.0,
color: const Color(0xff0087a8),
child: Container(
padding: const EdgeInsets.all(20.0),
margin: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
color: const Color.fromRGBO(19, 12, 117, 1.0),
),
child: Stack(
children: <Widget>[
Text(
'EUR - USD',
style: Theme.of(context).textTheme.display2.copyWith(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
Align(
alignment: Alignment.centerLeft,
child: Text(
'Forex',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
backgroundColor: const Color(0xff0087a8),
onPressed: () {},
child: Icon(
Icons.add,
color: Colors.white,
size: 50.0,
),
),
)
],
),
),
);
}
}
Try this code
Container(
height: 180,
width: double.infinity,
child: Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'EUR/USD',
style: TextStyle(fontSize: 40),
),
Text('FOREX', style: TextStyle(fontSize: 20)),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.blueAccent,
child: IconButton(
onPressed: () {
print('On Pressed');
},
icon: Icon(Icons.add),
)),
],
)
],
),
),
),
)
Use custom widget for list item OR column from below code for single view. To align left and right you have to put your view in 'Align' as in below -
class _ItemsState extends State<Items> {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: SizedBox(
width: 380,
height: 160,
child: Card(
child: ListView.builder(
itemCount: 1,
itemBuilder: (context, index) {
return
Padding(padding: EdgeInsets.all(10.0),child: Column(children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Column(children: <Widget>[
Text(
'title',
style: TextStyle(fontSize: 20.0 , fontWeight: FontWeight.bold,),
),
Text(
'body',
style: TextStyle(fontSize: 14.0), )
]),
),
Align(
alignment: Alignment.centerRight,
child: CircleAvatar(
maxRadius: 20.0,
backgroundColor: Colors.blueGrey,
child: IconButton(
icon: Icon(Icons.add,
color: Colors.white,),
))
)
]));
}))));
}
}