I have a piece of code here which makes up the body of the login and register screens. Everything is in the position i want but i would like to space them out a little. The two input fields, title, subtitle, button and textbutton are too close together vertically.
I tried to use mainaxisalignment.spacebetween but i get a constraint error and everything i have on the screen disappears afterwards except the background.
The body used by the register and login screen:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomLeft,
colors: [Color(0xFF1F1F1F), Color(0xFF1F1F1F)],
),
image: DecorationImage(
image: AssetImage("lib/assets/images/register.png"),
alignment: Alignment.topCenter,
),
),
child: Stack(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/bottomleft.png'),
alignment: Alignment.bottomLeft,
),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/toptop.png'),
alignment: Alignment.topRight,
),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/topbig.png'),
alignment: Alignment.topCenter,
repeat: ImageRepeat.repeat),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/assets/images/top.png'),
alignment: Alignment.topCenter,
repeat: ImageRepeat.repeatX),
),
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 25, vertical: 250),
child: ListView(
children: [
if (onBackPressed == null) verticalSpaceLarge,
if (onBackPressed != null) verticalSpaceRegular,
if (onBackPressed != null)
IconButton(
padding: EdgeInsets.zero,
onPressed: onBackPressed,
alignment: Alignment.centerLeft,
icon: Icon(
Icons.arrow_back_ios,
color: Colors.black,
),
),
Center(
child: Text(
title!,
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
),
),
),
Align(
alignment: Alignment.center,
child: SizedBox(
child: Center(
child: Text(
subtitle!,
style: ktsMediumGreyBodyText,
),
),
),
),
form!,
if (onForgotPassword != null)
Align(
alignment: Alignment.centerRight,
child: GestureDetector(
onTap: onForgotPassword,
child: Center(
child: Text(
'Forgot Password?',
style: ktsMediumGreyBodyText.copyWith(),
),
),
),
),
if (validationMessage != null)
Center(
child: Text(
validationMessage!,
style: TextStyle(
color: Colors.red, fontSize: kBodyTextSize),
),
),
if (validationMessage != null) verticalSpaceRegular,
GestureDetector(
onTap: onMainButtonTapped,
child: Container(
width: double.infinity,
height: 50,
alignment: Alignment.center,
decoration: BoxDecoration(
color: kcPrimaryColor,
borderRadius: BorderRadius.circular(8),
),
child: busy!
? CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(Colors.white),
)
: Text(
mainButtonTitle!,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 14),
),
),
),
if (onCreateAccountTapped != null)
GestureDetector(
onTap: onCreateAccountTapped,
child: Center(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Don\'t have an account?",
style: TextStyle(color: Colors.white),
),
Text(
"SIGN UP",
style: TextStyle(color: kcPrimaryColor),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"OR SIGN IN WITH",
style: TextStyle(color: kcMediumGreyColor),
),
],
),
],
),
),
),
if (showTermsText!)
Center(
child: Text(
"By signing up you agree to our terms, conditions and privacy policy",
style: ktsMediumGreyBodyText,
textAlign: TextAlign.center,
),
),
],
),
),
],
),
),
);
}
}
the login screen:
Widget build(BuildContext context) {
return ViewModelBuilder<LoginScreenModel>.reactive(
builder: (context, model, child) => Scaffold(
body: AuthenticationLayout(
busy: model.isBusy,
onCreateAccountTapped: () {},
//validationMessage: model.validationMessage,
title: 'SIGN IN',
subtitle: 'please fill the form below',
mainButtonTitle: 'SIGN IN',
form: Column(
children: [
TextField(
decoration: InputDecoration(
hintText: 'Username',
hintStyle: TextStyle(color: Colors.white),
prefixIcon: const Icon(
Icons.person,
color: Colors.white,
),
),
),
TextField(
decoration: InputDecoration(
hintText: 'Password',
hintStyle: TextStyle(color: Colors.white),
prefixIcon: const Icon(
Icons.lock,
color: Colors.white,
),
),
),
],
),
onForgotPassword: () {},
),
),
viewModelBuilder: () => LoginScreenModel(),
);
}
}
Column(
children: <Widget>[
FirstWidget(),
SizedBox(height: 100),
SecondWidget(),
],
),
You should Add SizedBox() in between two Widgets, or Set Padding to your widgets or you use Container also like below:
Using SizedBox()
Column(
children:[
Widget 1(),
SizedBox(height:10),
Widget 2(),
SizedBox(height:10),
Widget 3(),
],
),
Using Padding()
Column(
children:[
Padding(
padding:EdgeInsets.all(8.0)
child: Widget 1(),
),
Padding(
padding:EdgeInsets.all(8.0)
child: Widget 2(),
),
Padding(
padding:EdgeInsets.all(8.0)
child: Widget 3(),
),
],
),
Using Container()
Column(
children:[
Container(
padding:EdgeInsets.all(8.0)
child: Widget 1(),
),
Container(
padding:EdgeInsets.all(8.0)
child: Widget 2(),
),
Container(
padding:EdgeInsets.all(8.0)
child: Widget 3(),
),
],
),
You should use padding on your choice like:
EdgeInsets.all(8.0),
EdgeInsets.only(left:8.0,top:8.0,right:8.0,bottom:8.0),
EdgeInsets.symmetric(vertical: 8.0,horizontal:8.0),
You may add some SizedBox() between or set margin to the components.
Use SizedBox widget to add vertical spacing to your widget.
For e.g
SizedBox(height: 16),
Related
I can not remove the indent from the first ListTile in any way. I think this is some kind of default indent, but I could not overcome it. Is it possible? Attached is the code and screenshot.
Drawer(
child: Container(
padding: EdgeInsets.zero,
child: Column(
children: <Widget>[
SizedBox(
height: 88.0,
width: 1000,
child: DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'Настройки',
style: TextStyle(
color: Colors.white,
fontSize: MainStyle.p.fontSize
),
),
),
),
Expanded(
child: Column(
children: <Widget>[
ListTile(
title: Text(
'Язык',
style: TextStyle(
fontSize: MainStyle.p.fontSize
),
),
subtitle: Text(
"Русский",
),
trailing: IconButton(
icon: Icon(Icons.edit),
color: Colors.black,
onPressed: () {
},
),
),
ListTile(
title: Text(
'Выход',
style: TextStyle(
fontSize: MainStyle.p.fontSize
),
),
onTap: () {
exit();
},
),
],
)
),
Container(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: Column(
children: <Widget>[
ListTile(
title: Text(
globalState.version,
style: TextStyle(
fontSize: 15,
color: Colors.grey
),
textAlign: TextAlign.center,
),
),
],
)
)
),
],
),
)
);
P.S. There is not any details, but StackOverflow make me write more text, because of "It looks like your post is mostly code; please add some more details."
add this line to your DrawerHeader:
margin: EdgeInsets.zero,
Hi what I want to do is make a dropdown menu inside of a drawer header but when I tried I got constraint errors also Im curious how can I pass 2 values into it so when pressed the text will change according to it
My code:
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
Container(
height: MediaQuery.of(context).size.height * 0.20,
child: DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
children: [
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
widget.name,
style: TextStyle(
color: Colors.amber,
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
),
SizedBox(
height: 3,
),
Align(
alignment: Alignment.centerLeft,
child: Text(
widget.name,
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w400,
),
),
),
],
),
),
),
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: Icon(Icons.keyboard_arrow_down),
),
)
],
),
),
),
),
SingleChildScrollView(
child: Column(
children: [
AppListItems(Icons.favorite, 'Text', SecondRoute()),
AppListItems(Icons.favorite, 'Text', SecondRoute()),
],
),
),
],
),
);
This is how it looks like and where I want the dropdown menu to be:
Any help would be great, thanks in advance
Try below code hope its help to you.
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
Container(
height: MediaQuery.of(context).size.height * 0.20,
child: DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
children: [
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
'widget.name',
style: TextStyle(
color: Colors.amber,
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
),
SizedBox(
height: 3,
),
Align(
alignment: Alignment.centerLeft,
child: Text(
'widget.name',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w400,
),
),
),
],
),
),
),
Expanded(
child: DropdownButton<String>(
value: dropdownValue,
isDense: true,
icon: const Icon(Icons.arrow_downward),
elevation: 16,
style: const TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
)
],
),
),
),
),
SingleChildScrollView(
child: Column(
children: [
Icon(
Icons.favorite,
),
Icon(
Icons.favorite,
),
],
),
),
],
),
),
Your result screen->
Your dropdown->
Hello i have some problem, I need to make button together on my flutter code Like this,
but when i try on flutter it become like This, is there any way to make it like in first image?
heres my code for the button
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
SizedBox(
width: 130,
height: 50,
child: TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.blue)),
onPressed: () {},
child: Text(
'Login',
style: TextStyle(color: Colors.white),
),
),
),
Expanded(
child: SizedBox(
width: 130,
height: 50,
child: TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.white),
),
onPressed: () {},
child: Text(
'Daftar',
style: TextStyle(color: Colors.blue),
),),
),
),
],
),
var selectedButton = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
margin: EdgeInsets.all(16),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
shape: BoxShape.rectangle,
border: Border.all(color: Colors.blue, width: 3)),
child: Row(
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
shape: BoxShape.rectangle,
color: selectedButton == 0 ? Colors.blue : Colors.white),
child: TextButton(
onPressed: () {
setState(() {
selectedButton = 0;
});
},
style: TextButton.styleFrom(
primary: selectedButton == 0 ? Colors.white : Colors.blue,
),
child: Text(
'TextButton',
style: TextStyle(fontSize: 16),
),
),
)),
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
shape: BoxShape.rectangle,
color: selectedButton == 1 ? Colors.blue : Colors.white),
child: TextButton(
onPressed: () {
setState(() {
selectedButton = 1;
});
},
style: TextButton.styleFrom(
primary: selectedButton == 1 ? Colors.white : Colors.blue,
),
child: Text(
'TextButton',
style: TextStyle(fontSize: 16),
),
),
)),
],
),
),
),
);
}
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
width: 260,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
SizedBox(
width: 130,
height: 50,
child: TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(
15,
),
),
),
),
),
onPressed: () {},
child: Text(
'Login',
style: TextStyle(color: Colors.white),
),
),
),
SizedBox(
width: 130,
height: 50,
child: TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.white),
),
onPressed: () {},
child: Text(
'Daftar',
style: TextStyle(color: Colors.blue),
),
),
),
],
),
),
],
),
),
I have a piece of code here which makes up the body of the login and register screens. I added an image at the very top but my question is how do i add multiple images for the body?
I have some images i want to add in different positions for blur effects but whenever do either nothing shows up or gives me an error about the constraints.
When i add multiple containers with a single image in each one, i get the constraint error.
Everything was added in pubspec.yaml and in the folders correctly.
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomLeft,
colors: [Color(0xFF1F1F1F), Color(0xFF1F1F1F)],
),
image: DecorationImage(
image: AssetImage("lib/assets/images/register.png"),
alignment: Alignment.topCenter,
//fit: BoxFit.cover,
),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 250),
child: ListView(
children: [
if (onBackPressed == null) verticalSpaceLarge,
if (onBackPressed != null) verticalSpaceRegular,
if (onBackPressed != null)
IconButton(
padding: EdgeInsets.zero,
onPressed: onBackPressed,
alignment: Alignment.centerLeft,
icon: Icon(
Icons.arrow_back_ios,
color: Colors.black,
),
),
Center(
child: Text(
title!,
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
),
),
),
verticalSpaceSmall,
SizedBox(
child: Center(
child: Text(
subtitle!,
style: ktsMediumGreyBodyText,
),
),
),
verticalSpaceRegular,
form!,
if (onForgotPassword != null)
Align(
alignment: Alignment.centerRight,
child: GestureDetector(
onTap: onForgotPassword,
child: Center(
child: Text(
'Forgot Password?',
style: ktsMediumGreyBodyText.copyWith(),
),
),
),
),
verticalSpaceRegular,
if (validationMessage != null)
Center(
child: Text(
validationMessage!,
style:
TextStyle(color: Colors.red, fontSize: kBodyTextSize),
),
),
if (validationMessage != null) verticalSpaceRegular,
GestureDetector(
onTap: onMainButtonTapped,
child: Container(
width: double.infinity,
height: 50,
alignment: Alignment.center,
decoration: BoxDecoration(
color: kcPrimaryColor,
borderRadius: BorderRadius.circular(8),
),
child: busy!
? CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(Colors.white),
)
: Text(
mainButtonTitle!,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 14),
),
),
),
verticalSpaceRegular,
if (onCreateAccountTapped != null)
GestureDetector(
onTap: onCreateAccountTapped,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
verticalSpaceMedium,
Text(
"Don\'t have an account?",
style: TextStyle(color: Colors.white),
),
horizontalSpaceTiny,
Text(
"SIGN UP",
style: TextStyle(color: kcPrimaryColor),
),
],
),
),
),
if (showTermsText!)
Center(
child: Text(
"By signing up you agree to our terms, conditions and privacy policy",
style: ktsMediumGreyBodyText,
textAlign: TextAlign.center,
),
),
],
),
),
),
);
}
}
In the Login screen, there is a background image and all stuff will be scrollable but SingleChildScrollView is not showing macth_parent height. My aim is to design like here
class MyLoginOne extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
fit: BoxFit.cover,
image:new NetworkImage('https://i.pinimg.com/originals/c2/47/e9/c247e913a0214313045a8a5c39f8522b.jpg')
)
),
child: new BackdropFilter(
filter:new ImageFilter.blur(sigmaX: 1.1,sigmaY:1.1),
child: new Container(
decoration: new BoxDecoration(color: Colors.black45.withOpacity(0.5)),
child: new SingleChildScrollView(
child: new Container(
child: new Column(
children: <Widget>[
new Container(
height: 200.0,
child: new Stack(
children: <Widget>[
new Align(
alignment: AlignmentDirectional.center,
child:new Container(
height: 120.0,
width: 120.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.white30
),
)
),
new Align(
alignment: AlignmentDirectional.center,
child: new Container(
child: new Text("Farha",style: new TextStyle(
color: Colors.white,
fontSize: 14.0,
fontFamily: "WorkSansLight"
),),
),),],))],),),)),), ));}}
my circle container height is about 200.0 but SingleChildScrollView is not showing full height.
Code of the required layout - its not 100% but get the job Done. You can Complete it as required.
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: new BoxDecoration(
image: new DecorationImage(
fit: BoxFit.cover,
image: new NetworkImage(
'https://i.pinimg.com/originals/c2/47/e9/c247e913a0214313045a8a5c39f8522b.jpg'))),
),
Center(
child: SingleChildScrollView(
padding: EdgeInsets.all(30.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
CircleAvatar(
radius: 58.0,
child: Text('Travel'),
),
SizedBox(
height: 20.0,
),
TextFormField(
decoration: InputDecoration(
prefixIcon: Icon(
Icons.person,
color: Colors.white,
),
hintStyle: TextStyle(color: Colors.white),
filled: true,
fillColor: Colors.black45,
hintText: 'Username'),
),
SizedBox(
height: 10.0,
),
TextFormField(
decoration: InputDecoration(
filled: true,
prefixIcon: Icon(Icons.lock, color: Colors.white),
hintStyle: TextStyle(color: Colors.white),
fillColor: Colors.black45,
hintText: 'Password'),
),
SizedBox(
height: 15.0,
),
FlatButton(
onPressed: () {},
child: Text(
'Forgot your Password?',
style: TextStyle(color: Colors.white),
)),
SizedBox(
height: 15.0,
),
RaisedButton(
onPressed: () {},
child: Padding(
padding: EdgeInsets.all(15.0),
child: Text('LOGIN')),
color: Colors.redAccent,
textColor: Colors.white,
),
SizedBox(
height: 10.0,
),
RaisedButton(
onPressed: () {},
child: Padding(
padding: EdgeInsets.all(15.0),
child: Text('REGISTER')),
color: Colors.grey,
textColor: Colors.white,
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
Expanded(
child: Divider(
color: Colors.white,
height: 8.0,
),
),
SizedBox(
width: 8.0,
),
Text(
'OR',
style: TextStyle(color: Colors.white),
),
SizedBox(
width: 8.0,
),
Expanded(
child: Divider(
color: Colors.white,
height: 8.0,
),
)
],
),
Row(
children: <Widget>[
// TODO Social Icons
],
),
],
),
),
),
],
),
);
}
OutPut:
A Container widget will size themselves to its child, unless specified.
In your case:
...
Container(
height: double.infinity, // <-----
decoration: new BoxDecoration(
image: new DecorationImage(
fit: BoxFit.cover,
image: new NetworkImage(
'https://i.pinimg.com/originals/c2/47/e9/c247e913a0214313045a8a5c39f8522b.jpg')))
...