Flutter - white spaces displaying for grid view cell in landscape mode - flutter

i have a problem to get ride of a white space in grid view cell in fluter, especially when the device is in landscape orientation, the code is :
return Container(
padding: EdgeInsets.only(top: 15),
child: GridView.builder(
itemCount: recipesList.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 0.0,
mainAxisSpacing: 0.0,
//childAspectRatio: 1,
),
itemBuilder: (BuildContext context, int index) {
Recipe recipe = recipesList[index];
return Dismissible(
key: UniqueKey(),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
margin: EdgeInsets.all(8),
color: Colors.white,
elevation: 5,
child: InkWell(
onTap: (){},
child: Column(
// padding: EdgeInsets.zero,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
child: Image.asset(
'images/${recipe.picture}',
height: 200,
width: double.infinity,
fit: BoxFit.cover,
),
),
Container(
padding: EdgeInsets.all(8.0),
child: Row(
children: [
Expanded(
child: Container(
alignment: Alignment.topLeft,
//margin: EdgeInsets.only(left: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'${recipe.id} - ${recipe.title}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w500,
),
),
Text(
'by Unknown Chef',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w300,
),
),
Row(
children: [
Icon(
Icons.star,
color: Colors.orange,
size: 20.0,
),
Icon(
Icons.star,
color: Colors.orange,
size: 20.0,
),
Icon(
Icons.star,
color: Colors.orange,
size: 20.0,
),
Icon(
Icons.star,
color: Colors.grey[400],
size: 20.0,
),
Icon(
Icons.star,
color: Colors.grey[400],
size: 20.0,
),
],
)
],
),
),
),
IconButton(
icon: recipe.isFavorite
? Icon(Icons.favorite, color: Colors.red)
: Icon(Icons.favorite_outline_outlined,
color: Colors.grey),
iconSize: 36,
onPressed: (){},
),
],
),
),
],
),
),
),
);
},
),
);
the result is fine as below:
but in landscape mode it's not what i want
the desired result would be like this
How can I make this cards to look like this in landscape orientation?


The default childAspectRatio is 1.0 meaning width = height. If you want to get the expected result, wrap your container in Expanded widget and remove Image height property as following
Expanded(
child: Container(
child: Image.asset(
'images/${recipe.picture}',
width: double.infinity,
fit: BoxFit.cover,
),
),
)

Related

How to make Positioned.fill responsive inside stack?

I am using positioned.fill top value to adjust my text along with image. I am using mediaQuery for responsiveness. When I adjust it on larger mobile screen, then it cause same issue on smaller screen.
This is my stack code:
Stack(children: <Widget>[
GestureDetector(
onTap: (() => Navigator.of(context).push(
Transitions(
transitionType: TransitionType.fade,
curve: Curves.bounceInOut,
duration: const Duration(milliseconds: 500),
reverseCurve: Curves.bounceOut,
widget: detailinvest(title)),
)),
child: Container(
// height: 260,
height: MediaQuery.of(context).size.height / 3,
padding: const EdgeInsets.all(8),
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image.network(
"https://arzenafees.com/wp-content/uploads/2021/06/Invest_Rudn_Enclave.jpg",
fit: BoxFit.cover,
)),
),
),
Positioned.fill(
// top: 255,
top: MediaQuery.of(context).size.width * 0.5,
child: Align(
alignment: Alignment.bottomCenter,
child: ListTile(
title: Text(
'Rudn Enclave',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
fontFamily: 'Roboto'),
),
subtitle: Row(
children: [
Icon(
Icons.location_on,
color: Constants.colorMain,
),
Expanded(
child: Text(
'Adiala Road, Rawalpindi, Rawalpindi Cantonment, Rawalpindi District, Punjab, 46600, Pakistan',
style: TextStyle(
fontSize: MediaQuery.of(context).size.width / 45,
),
),
),
],
),
)),
),
]),
Screenshot:
Note: This UI was working good on smaller screen
Edit: My GridView code:
body: GridView.count(
primary: false,
padding: const EdgeInsets.all(8),
crossAxisSpacing: 12,
mainAxisSpacing: 22,
crossAxisCount: 2,
childAspectRatio: 0.6,
children: <Widget>[

GridView.count(
primary: false,
padding: const EdgeInsets.all(8),
crossAxisSpacing: 10,
mainAxisSpacing: 20,
crossAxisCount: 2,
childAspectRatio: 0.5,
children: <Widget> [
Column(
children: <Widget>[
GestureDetector(
onTap: (() => Navigator.of(context).push(
Transitions(
transitionType: TransitionType.fade,
curve: Curves.bounceInOut,
duration: const Duration(milliseconds: 500),
reverseCurve: Curves.bounceOut,
widget: detailinvest(title)),
)),
child: Container(
height: MediaQuery.of(context).size.height / 3,
padding: const EdgeInsets.all(8),
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image.network(
"https://arzenafees.com/wp-content/uploads/2021/06/Invest_Rudn_Enclave.jpg",
fit: BoxFit.cover,
)
),
),
),
ListTile(
title: Text(
'Rudn Enclave',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
fontFamily: 'Roboto',
color: Colors.black
),
),
subtitle: Row(
children: [
Icon(Icons.location_on, color: Colors.red,),
Expanded(
child: Text(
'Adiala Road, Rawalpindi, Rawalpindi Cantonment, Rawalpindi District, Punjab, 46600, Pakistan',
style: TextStyle(
color: Colors.black,
fontSize: MediaQuery.of(context).size.width / 45,
),
),
),
],
),
),
]
),
]
),

This one working Fine :
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:page_view_builder_demo/configration/size_config.dart';
class TextFieldExample extends StatefulWidget {
const TextFieldExample({Key? key}) : super(key: key);
#override
State<TextFieldExample> createState() => _TextFieldExampleState();
}
class _TextFieldExampleState extends State<TextFieldExample> {
Widget build(BuildContext context) {
SizeConfig().init(context);
return Scaffold(
body: GridView.count(
crossAxisCount: 2,
children: [
commmanWidget(
"https://arzenafees.com/wp-content/uploads/2021/06/Invest_Rudn_Enclave.jpg"),
commmanWidget(
"https://arzenafees.com/wp-content/uploads/2021/06/Invest_Rudn_Enclave.jpg"),
],
),
);
}
Widget commmanWidget(String img) {
return Column(
children: [
Expanded(
flex: 10,
child: GestureDetector(
child: Container(
height: MediaQuery.of(context).size.height / 5,
padding: const EdgeInsets.all(8),
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image.network(
img,
fit: BoxFit.cover,
)),
),
),
),
Expanded(
flex: 3,
child: ListTile(
title: Text(
'Rudn Enclave',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
fontFamily: 'Roboto',
color: Colors.black),
),
subtitle: Row(
children: [
Icon(
Icons.location_on,
color: Colors.red,
),
Expanded(
child: Text(
'Adiala Road, Rawalpindi, Rawalpindi Cantonment, Rawalpindi District, Punjab, 46600, Pakistan',
style: TextStyle(
color: Colors.black,
fontSize: MediaQuery.of(context).size.width / 45,
),
),
),
],
),
),
),
],
);
}
}

Favourite list button on product

i want to make an this function on the product but i don't know how to since I'm too fresh with flutter...
so here is the picture of how I want it to be
The Sample
and here is my codes.
child: GridTile(
footer: Container(
color: Colors.white,
child: Row(
children: [
Expanded(
flex: 8,
child: Text(product_name),
),
Text("\$$product_price",
style: const TextStyle(fontWeight: FontWeight.w600)),
TextButton(
onPressed: (){
debugPrint('added to cart');
},
child: Text("ADD TO CARD"),
style: TextButton.styleFrom(
primary: Colors.lightBlue[800],
shadowColor: Colors.deepPurple,
// elevation: 5,
),
),
],
),
),
child: Image.asset(
product_picture,
fit: BoxFit.cover,
),
),
),
),
),
and it is how it looks
How it looks
I will appreciate any help!

Here is something similar to the sample
GridView.count(
shrinkWrap: true,
childAspectRatio: .8,
crossAxisCount: 2,
mainAxisSpacing: 4,
crossAxisSpacing: 4,
children: List.generate(10, (index) {
return Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Image.network('https://i.ytimg.com/vi/6OovMIjDtAM/maxresdefault.jpg',)
),
const SizedBox(height: 14),
const Text('My Drink 101',
style: TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.w600),
),
const SizedBox(height: 14),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('500 ml', style: TextStyle(color: Colors.black, fontSize: 14, fontWeight: FontWeight.w300)),
Text('\$500 ml', style: TextStyle(color: Colors.black, fontSize: 14, fontWeight: FontWeight.w300)),
],
),
),
const SizedBox(height: 16),
Container(
alignment: Alignment.centerRight,
child: InkWell(
onTap: () {
// add to cart
},
child: Icon(Icons.shopping_cart_outlined, color: Colors.blue,),
),
),
],
),
Align(
alignment: Alignment.topLeft,
child: InkWell(
onTap: () {
// add to favourite
},
child: const Padding(
padding: EdgeInsets.all(8.0),
child: Icon(
Icons.favorite_border,
color: Colors.white,
),
),
),
),
],
),
);
}),
)

Well, there is a bunch needed to make a card similar to the sample you provided. Take a look at this video to get some ideas. I would recommend you to read the flutter widgets documentation for a better understanding of how each property work.
This channel also has a lot of great flutter UI content that is worthy to have a look at.
To start I would consider using a Card instead of a Container

I want to do the expandable list view as below in attached image. How can I achieve this type of functionality in flutter?

How can I achieve this?. I have tried customizing ExpansionTile but not able to get similar effects on expansion and collapse. Mainly the prefix icon is bigger in size and so the expandable text is not close to the date. Also, the suffix icon for expanding/collapsing not fully covered with the background color.
I am also attaching an image that I have tried. I have used https://pub.dev/packages/expandable#-readme-tab- to achieve a similar effect but no luck.
I am really stuck at this place and want any kind of help.
Your help will be appreciated.
Thanks.

Just implemented, try this:
ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return ExpandableNotifier(
child: Card(
elevation: 4,
child: Expandable(
collapsed: Container(
width: MediaQuery.of(context).size.width,
height: 105,
child: ExpandableButton(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
child: ClipOval(
child: Container(
height: 80,
width: 80,
color: Colors.yellow,
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Welkom bij Haaer',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.bold,
),
),
Text(
'2019/06/01 11:04',
style: TextStyle(
color: Colors.grey,
fontSize: 12.0,
),
),
Text(
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla',
softWrap: true,
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
],
),
),
),
Container(
color: Colors.yellow,
width: 30,
height: 105,
child: Icon(
Icons.keyboard_arrow_right,
color: Colors.white,
),
),
],
),
),
),
expanded: Container(
height: 200,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
child: ClipOval(
child: Container(
height: 80,
width: 80,
color: Colors.purple,
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Welkom bij Haaer',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.bold,
),
),
Text(
'2019/06/01 11:04',
style: TextStyle(
color: Colors.grey,
fontSize: 12.0,
),
),
Text(
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla',
softWrap: true,
),
SizedBox(
height: 5,
),
Container(
width: 80,
height: 20,
child: RaisedButton(
padding: EdgeInsets.all(0),
color: Colors.purple,
child: Text('show'),
onPressed: () {},
),
),
],
),
),
),
ExpandableButton(
child: Container(
color: Colors.purple,
width: 30,
height: 200,
child: Icon(
Icons.keyboard_arrow_down,
color: Colors.white,
),
),
),
],
),
),
),
),
);
},
),

SingleChildScrollView not working in Column

I am building an app facing a singleChildScrollView not able to scroll the page the text has been cut from bottom after the contact button i want to scroll the page but but spending so much time can't fix problem.
enter image description here
enter code here
import 'package:flutter/material.dart';
class DetailScreen extends StatefulWidget {
final electricain;
DetailScreen(this.electricain);
#override
_DetailScreenState createState() => _DetailScreenState();
}
class _DetailScreenState extends State<DetailScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height / 3 + 20,
width: MediaQuery.of(context).size.width,
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset(
'assets/images/detail_bg.jpg',
fit: BoxFit.fill,
),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Colors.purple.withOpacity(0.1),
),
],
),
),
Positioned(
top: 50,
left: 20,
child: IconButton(
icon: Icon(
Icons.arrow_back_ios,
color: Colors.white,
),
onPressed: () {
Navigator.pop(context);
},
),
),
Positioned(
top: MediaQuery.of(context).size.height / 3.6 - 40,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(60),
),
),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 30),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 130,
),
Text(
'Description',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
SizedBox(
height: 10,
),
Text(
'${widget.electricain['desc']}',
style: TextStyle(
color: Colors.grey,
),
textAlign: TextAlign.justify,
),
SizedBox(
height: 10,
),
Text(
"\n Services List",
style: TextStyle(
fontSize: 20.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
Text(
'${widget.electricain['services']}',
style: TextStyle(
color: Colors.grey,
),
),
SizedBox(height: 30),
MaterialButton(
onPressed: () {},
color: Colors.orange,
child: Text(
"Contact",
style: TextStyle(
color: Colors.white, fontSize: 16.0),
),
),
SizedBox(height: 10),
Text(
'${widget.electricain['services']}',
style: TextStyle(
color: Colors.grey,
),
),
],
),
),
),
),
),
),
Positioned(
top: MediaQuery.of(context).size.height / 3 - 90,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 30),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width / 3 - 20,
height: MediaQuery.of(context).size.height / 6 + 20,
decoration: BoxDecoration(
color: widget.electricain['bgColor'],
borderRadius: BorderRadius.circular(20),
),
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Positioned(
top: 10,
right: -25,
child: Image.asset(
widget.electricain['imgUrl'],
scale: 1.7,
),
),
],
),
),
SizedBox(
width: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
widget.electricain['electricainName'],
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
SizedBox(
height: 5,
),
Text(
widget.electricain['shopName'],
style: TextStyle(
fontWeight: FontWeight.w300,
color: Colors.grey,
),
),
SizedBox(
height: 10,
),
Row(
children: <Widget>[
Icon(
Icons.star,
size: 16,
color: Color(0xffFF8573),
),
SizedBox(width: 5),
Text(
widget.electricain['rating'],
style: TextStyle(
color: Color(0xffFF8573),
),
),
SizedBox(
width: 5,
),
Text(
'(${widget.electricain['rateAmount']})',
style: TextStyle(
color: Colors.grey,
),
),
],
)
],
),
],
),
),
),
],
),
),
);
}
}

try this:
LayoutBuilder(builder: (context, constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(minWidth: constraints.maxWidth, minHeight: constraints.maxHeight),
child: IntrinsicHeight(
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//your children here
]
),
)
)
);
})
IntrinsicHeight class
A widget that sizes its child to the child's intrinsic height.
This class is useful, for example, when unlimited height is available and you would like a child that would otherwise attempt to expand infinitely to instead size itself to a more reasonable height.

How to create Column in Center of App with Left/Right margins?

im new to Flutter. I have started learning a few days ago and am trying to grasp the concept of Rows and Columns.
I made a simple Page like this.
To explain my code I first make a Column to put everything in.
Then i use a Row for the TopBar, and then another Row to put the things into the body, so that i can put a Column in the center of the Page, with a bit of space on both sides of it. I then pack Text and Button in a Column and insert it into the Column in the Middle of the Page.
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: MainPage(),
));
class MainPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
Color Color1 = const Color.fromRGBO(204, 126, 185, 100);
Color Color2 = const Color.fromRGBO(140, 235, 203, 100);
Color Color3 = const Color.fromRGBO(227, 225, 204, 100);
Color Color4 = const Color.fromRGBO(89, 130, 145, 100);
return Scaffold(
body: Container(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 50.0, 0, 0),
child: SizedBox(
child: Image.asset('assets/MenuIcon.png'),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 50.0, 20.0, 0),
child: SizedBox(
child: Image.asset('assets/SearchIcon.png'),
),
),
],
),
Divider(height: 50,),
Expanded(
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(),
),
Expanded(
flex: 5,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Erwachsen werden",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Color1,
),
),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Glückliches Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Color2,
),
),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Ab in das Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Color3,
),
)
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Alleine Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Color4,
),
),
),
],
),
],
),
),
Expanded(
flex:1,
child: Container(),
),
],
),
),
],
),
),
);
}
}
I feel like there is a lot of unnecessary Coding, but i can't seem to be able to improve it, with it working properly.
Can anybody Help improve my code?
Simply what i want to achieve is a Column in the middle of the body with margin to the left and right of the screen, without a million lines of code.

Scaffold by default has an parameter for AppBar() use that for your app bar
and as per your layout I will suggest to use ListView() instead of Column()
using Listview will automatically scroll your page if length of your page extends
and also has an parameter as padding using which you can add space on your left and right side
refer below mentioned code structure
Scaffold(
appbar: AppBar(),
body: ListView(
padding: EdgeInsets.only(left:12.0,right:12.0),
children: <Widget>[
//your list of widgets here
],
)
)

Try this:
Code example
Center(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10),
height: 400,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Material(
color: Colors.transparent,
child: Image.asset(
"assets/images/logo.png",
height: 100,
width: 200,
),
),
//email
TextFormField(
style: TextStyle(
fontFamily: "Light",
color: Theme.of(context).primaryColor,
),
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
cursorColor: Theme.of(context).primaryColor,
decoration: InputDecoration(
labelText: 'Username',
filled: true,
fillColor: Colors.white,
),
),
TextFormField(
style: TextStyle(
fontFamily: "Light",
color: Theme.of(context).primaryColor,
),
keyboardType: TextInputType.visiblePassword,
textInputAction: TextInputAction.done,
cursorColor: Theme.of(context).primaryColor,
obscureText: passwordVisible,
controller: _passwordController,
decoration: InputDecoration(
labelText: 'Password',
filled: true,
fillColor: Colors.white,
onPressed: () {},
),
),
),
Container(
child: RaisedButton(
onPressed: () {},
child: Text(
"Login",
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontFamily: "Light",
),
),
),
),
],
)),
)

I removed unnecessary code ! It may help you !
Color color1 = const Color.fromRGBO(204, 126, 185, 100);
Color color2 = const Color.fromRGBO(140, 235, 203, 100);
Color color3 = const Color.fromRGBO(227, 225, 204, 100);
Color color4 = const Color.fromRGBO(89, 130, 145, 100);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.white,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 50.0, 0, 0),
child: SizedBox(
// child: Image.asset('assets/MenuIcon.png'),
child:Icon(Icons.menu,color:Colors.black)
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 50.0, 20.0, 0),
child: SizedBox(
// child: Image.asset('assets/SearchIcon.png')
child:Icon(Icons.search,color:Colors.black)
),
),
],
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left:50,right:50),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize:MainAxisSize.min,
children: <Widget>[
Text(
"Erwachsen werden",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: color1,
child: Text('Button')),
),
),
SizedBox(height: 10.0),
Text(
"Glückliches Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: color2,
child: Text('Button')),
),
),
SizedBox(height: 10.0),
Text(
"Ab in das Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: color3,
child: Text('Button')),
)),
SizedBox(height: 10.0),
Text(
"Alleine Leben",
style: TextStyle(
fontWeight: FontWeight.w200,
color: Colors.black,
fontSize: 28.0,
),
),
SizedBox(height: 10.0),
SizedBox(
width: double.infinity,
child: ButtonTheme(
minWidth: 300,
height: 70,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: color4,
child: Text('Button')),
),
),
],
),
),
),
],
),
),
);
}
}