I'm currently working on a card that requires this bar to be at the bottom. But I tried many ways like a scaffold and still can't get it to be at the bottom.
Align(
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: Color(0xF6F6F6F6))),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 30,
child: FlatButton.icon(
color: Colors.white,
icon: Icon(Icons.bookmark_border,
size: 18, color: Colors.black38),
label: Text('Bookmark',
style: TextStyle(
fontSize: 13,
color: Colors.black54)),
onPressed: () {},
),
),
Container(
height: 30,
child: FlatButton.icon(
color: Colors.white,
icon: Icon(Icons.share,
size: 18, color: Colors.black38),
label: Text('Share',
style: TextStyle(
fontSize: 13,
color: Colors.black54)),
onPressed: () {},
),
)
])),
)],
Screenshot
You can put the Row in a Column and above the Row you have an Expanded wrapping the widget. In this case, I used a Container and I set the color to orange.
class BarStaysDown extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Container(
color: Colors.orange,
),
),
Container(
color: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 30,
child: FlatButton.icon(
color: Colors.white,
icon: Icon(Icons.bookmark_border,
size: 18, color: Colors.black38),
label: Text('Bookmark',
style:
TextStyle(fontSize: 13, color: Colors.black54)),
onPressed: () {},
),
),
Container(
height: 30,
child: FlatButton.icon(
color: Colors.white,
icon: Icon(Icons.share, size: 18, color: Colors.black38),
label: Text('Share',
style:
TextStyle(fontSize: 13, color: Colors.black54)),
onPressed: () {},
),
)
]
),
)
],
),
),
);
}
}
The ouput:
Try adding crossAxisAlignment: CrossAxisAlignment.end to the row.
Hope it helped.
Without more information I am not sure that what I suggest will work. But you can use a Stack widget in combination with Align to achieve what you want. The stack docs with examples, check this article about indexed stacks.
Related
I am trying to replicate the AppBar widget as shown in the image below. I tried using Row widget and added the required widgets inside it's children and added crossAxisAlignment: CrossAxisAlignment.center in order to align all the widgets in center (horizontally, as it is a Row widget). But I'm unable to achieve the results, getting A RenderFlex overflowed by 26 pixels on the right. error, (obviously because it is flowing out of the appBar area).
Required:
Mine:
Code:
Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.search),
color: Colors.black,
)
],
leading: InkWell(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 40,
width: 40,
decoration: const BoxDecoration(
color: Colors.grey,
shape: BoxShape.circle,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
"Welcome",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.normal,
color: Colors.grey,
),
),
Text(
"John",
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
],
),
],
),
onTap: () { // open drawer },
),
),
);
If anyone could guide me what I'm doing wrong, I would really appreciate it!
Thanks!
Lets try title
Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.search),
color: Colors.black,
)
],
title: InkWell(
onTap: (){},
child: Row(
children: [
Container(
width: 40,
height: 40,
decoration: const BoxDecoration(
color: Colors.grey,
shape: BoxShape.circle,
),
),
SizedBox(width: 10,),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Welcome",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.normal,
color: Colors.grey,
),
),
Text(
"John",
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
],
),
],
),
),
),
body: Container(
))
with leading
leadingWidth: double.infinity,
leading: InkWell(-------)
output:
The reason why this is happening is that you are using leading property, which has width limitation defined by leadingWidth properly of AppBar, which is 56.0 by default. You can try setting leadingWidth with value double.infinity and that would work.
Alternatively you should re-consider using leading, as its main purpose is some icon or small widget coming before title.
you can replace my source code, please it will work 100%. best of luck!
Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.search),
color: Colors.black,
)
],
leading: InkWell(
child: FittedBox(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 40,
width: 40,
decoration: const BoxDecoration(
color: Colors.grey,
shape: BoxShape.circle,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
"Welcome",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.normal,
color: Colors.grey,
),
),
Text(
"John",
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
],
),
],
),
),
),
));
I want to wrap text and an icon in a row such that text is exactly at the center and icon is at the right end in flutter
Row(
children: [
Center(
child: Text(
"Add Child",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.indigo[900],
),
),
),
Padding(
padding: const EdgeInsets.only(top: 1),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
IconButton(
icon: Icon(Icons.close),
iconSize: 18,
color: Colors.black,
onPressed: () {
Navigator.pop(context);
},
),
],
),
),
],
),
Try this
Widget _iconButton() {
return Container(
height: 40,
width: MediaQuery.of(context).size.width - 80,
decoration: BoxDecoration(
color: Color(0xff303030),
borderRadius: BorderRadius.circular(5),
),
child: Stack(
alignment: Alignment.center,
children: [
Text(
'Add',
style: TextStyle(color: Colors.white, fontSize: 18),
),
Positioned(
right: 8,
child: Container(
height: 30,
width: 30,
padding: EdgeInsets.all(6),
child: Icon(Icons.add),
),
),
],
),
);
}
enter image description here Like in my sample image, below, I want to increase or decrease the quantity by clicking the button for a single list item. If I increase the counter in setState (), its increment in each item in the list. I need help with this, especially managing a specific list item in Flutter Flutter.
Container(
height: 500.0,
width: double.infinity,
child: GridView.count(
crossAxisCount: 2,
children:
List.generate(userData == null ? 0 : userData.length, (index) {
return Container(
child: SizedBox(
width: 700,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Image.network(
"${userData[index]["image"]}",
width: 300,
height: 100,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: IconButton(
color: Colors.blue,
icon: const Icon(Icons.remove_circle,
size: 35.0),
onPressed: _decrementCount),
),
Container(
child: CircleAvatar(
radius: 20.0,
backgroundColor: Colors.white,
child: Text(
_counter.toString(),
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
),
Container(
child: IconButton(
color: Colors.orange,
icon: const Icon(Icons.add_circle,
size: 35.0),
onPressed: () {
_incrementCount(userData[index]);
},
),
),
],
),
Container(
height: 20.0,
child: Text(
"${userData[index]["libelle"]}",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
color: Colors.orange,
),
),
),
],
))),
);
})),
)
Make a separate Stateful class for your List item.
Like this
List.generate(2, (index) => MyCustomWidget(
user[index]
))
class MyCustomWidget extends StatefulWidget {
final user;
const MyCustomWidget({Key? key,required this.user}) : super(key:key);
#override
_MyCustomWidgetState createState() => _MyCustomWidgetState();
}
class _MyCustomWidgetState extends State<MyCustomWidget> {
#override
Widget build(BuildContext context) {
return Container(
child: SizedBox(
width: 700,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Image.network(
"${widget.user["image"]}",
width: 300,
height: 100,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: IconButton(
color: Colors.blue,
icon: const Icon(Icons.remove_circle,
size: 35.0),
onPressed: _decrementCount),
),
Container(
child: CircleAvatar(
radius: 20.0,
backgroundColor: Colors.white,
child: Text(
_counter.toString(),
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
),
Container(
child: IconButton(
color: Colors.orange,
icon: const Icon(Icons.add_circle,
size: 35.0),
onPressed: () {
_incrementCount(userData[index]);
},
),
),
],
),
Container(
height: 20.0,
child: Text(
"${widget.user["libelle"]}",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
color: Colors.orange,
),
),
),
],
))),
);
}
}
set some
conditions ? Image.network(
"${userData[index]["image"]}",
width: 300,
height: 100,
), : Image.network(
"${userData[index]["image"]}",
width: 400,
height: 250,
),
So if condition true then it's display like first one other wise take second one
I have designed an interaface of login. Everything is working fine but these two buttons are not looking good.
Myscreen in landscape
I want to adjust them according to the screen size and orientation
want to achieve
Here is my code to define them
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Material(
elevation: 15.0,
borderRadius: BorderRadius.circular(5.0),
color: Color(0xFF0148A4),
child: MaterialButton(
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding:
EdgeInsets.fromLTRB(20.0, 10.0, 0.0, 10.0),
splashColor: Colors.blueAccent,
onPressed: () {
/*...*/
},
child: Row(
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Icon(
FontAwesomeIcons.facebookF,
color: Colors.white,
),
SizedBox(
width: 20.0,
),
Text(
'Facebook',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 15.0,
),
),
],
),
),
),
),
SizedBox(
width: 15.0,
),
Expanded(
child: Material(
elevation: 15.0,
borderRadius: BorderRadius.circular(5.0),
color: Color(0xFFF14436),
child: MaterialButton(
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding:
EdgeInsets.fromLTRB(20.0, 10.0, 0.0, 10.0),
splashColor: Colors.redAccent,
onPressed: () {
/*...*/
},
child: Row(
textBaseline: TextBaseline.ideographic,
children: <Widget>[
Icon(
FontAwesomeIcons.google,
color: Colors.white,
),
SizedBox(
width: 20.0,
),
Text(
'Google',
style: TextStyle(fontSize: 15.0),
),
],
),
),
),
),
],
),
Also the button below needs to be responsive as well. I am using expanded widget but its working as shown. Any other way to do that !
You may try FractionallySizedBox to set the width of the whole container with respect to the available screen width. Also FittedBox can help to restrict the widget to be drawn with in the bounds.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light().copyWith(scaffoldBackgroundColor: Colors.white),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return FractionallySizedBox(
widthFactor: .8,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: FittedBox(
fit: BoxFit.fitWidth,
child: Material(
elevation: 15.0,
borderRadius: BorderRadius.circular(5.0),
color: Color(0xFF0148A4),
child: MaterialButton(
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
splashColor: Colors.blueAccent,
onPressed: () {
/*...*/
},
child: Row(
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Icon(
Icons.home,
color: Colors.white,
),
SizedBox(
width: 20.0,
),
Text(
'Facebook',
textAlign: TextAlign.start,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 15.0,
),
),
],
),
),
),
),
),
SizedBox(
width: 15.0,
),
Expanded(
child: FittedBox(
fit: BoxFit.fitWidth,
alignment: Alignment.center,
child: Material(
elevation: 15.0,
borderRadius: BorderRadius.circular(5.0),
color: Color(0xFFF14436),
child: MaterialButton(
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
splashColor: Colors.redAccent,
onPressed: () {
/*...*/
},
child: Row(
textBaseline: TextBaseline.ideographic,
children: <Widget>[
Icon(
Icons.home,
color: Colors.white,
),
SizedBox(
width: 20.0,
),
Text(
'Google',
style: TextStyle(fontSize: 15.0),
),
],
),
),
),
),
),
],
),
);
}
}
I am very new to flutter, Trying to design a login screen as in the image, I took a column and added all the widgets one by one. But coming to bottom part I tried with mainAxisAlignment, crossAxisAlignment still no luck, The bottom part is coming after the login button in the screen i.e Don't have account? and Create Account. I need those fields in bottom left to the screen.Please help how to achieve this.
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Color.fromRGBO(150, 169, 62, 1),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
alignment: Alignment.topCenter,
child: Container(
child: Image.asset('assets/logo_400.png'),
margin: const EdgeInsets.all(60.0),
width: 150.0,
height: 150.0,
),
),
Text(
'Log into your account',
style: TextStyle(color: Colors.white, fontSize: 25),
),
Container(
margin: const EdgeInsets.all(40.0),
child: Column(
children: <Widget>[
TextFormField(
decoration: const InputDecoration(
icon: Icon(
Icons.phone,
color: Colors.white,
),
hintText: '10 digit mobile number',
hintStyle: TextStyle(color: Colors.white)),
),
SizedBox(height: 20,),
TextFormField(
decoration: const InputDecoration(
// enabledBorder: const OutlineInputBorder(
// // width: 0.0 produces a thin "hairline" border
// borderSide: const BorderSide(
// color: Colors.white, width: 0.0),
// ),
// border: const OutlineInputBorder(),
suffixIcon: Icon(
Icons.remove_red_eye,
color: Colors.white,
),
icon: Icon(
Icons.lock,
color: Colors.white,
),
hintText: 'Password',
hintStyle: TextStyle(color: Colors.white)),
),
SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FlatButton(
//color: Colors.blue,
textColor: Colors.white,
//disabledColor: Colors.grey,
//disabledTextColor: Colors.black,
padding: EdgeInsets.all(8.0),
splashColor: Colors.blueAccent,
onPressed: () {
/*...*/
},
child: Text(
"Forgot Password",
style: TextStyle(
fontSize: 15.0,
decoration: TextDecoration.underline),
),
),
],
),
SizedBox(
height: 25,
),
Container(
margin: EdgeInsets.all(25.0),
child: ButtonTheme(
minWidth: 300.0,
height: 50.0,
buttonColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: RaisedButton(
//shape: StadiumBorder(),
onPressed: () {},
textColor: Colors.black,
padding: const EdgeInsets.all(0.0),
child: Text(
'Login',
style: TextStyle(fontSize: 20),
),
),
),
),
//Spacer(),
SizedBox(
height: 150,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
"Don't have a account?",
style: TextStyle(
color: Colors.white, fontSize: 15),
),
FlatButton(
//color: Colors.blue,
textColor: Colors.white,
//disabledColor: Colors.grey,
//disabledTextColor: Colors.black,
padding: EdgeInsets.all(8.0),
splashColor: Colors.blueAccent,
onPressed: () {
/*...*/
},
child: Text(
"Create Account",
style: TextStyle(
fontSize: 20.0,
decoration: TextDecoration.underline),
),
)
],
)
],
)
],
)),
],
)),
);
Don't have account? and Create Account. I need those fields in bottom
left to the screen
just change
Row(mainAxisAlignment: MainAxisAlignment.end
to
Row(mainAxisAlignment: MainAxisAlignment.start
BTW Have you tested this layout in landscape? You should wrap the entire form in a list view so that there is no overflow warnings.
I know this is from a while ago.
But maybe it can help someone in the same spot.
The best solution to it is to wrap your widget Expanded and Align widgets As so :
Expanded(
child: Align(
alignment: Alignment.bottomLeft,
child: ListTile(
title: Text('Logout'),
onTap: _logout,
),
),
)
You can wrapping Column in Row widget then after column children put your bottom part.