How I order my text and icon in a card (Flutter) - flutter

here is my currently code:
body: Scaffold(
body: Card(
margin: EdgeInsets.all(20),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 5,
),
Text("spots",
style:
TextStyle(color: Colors.black.withOpacity(0.6)))
],
),
],
),
),
),
))),
but i want it like this:


The 2nd Column you have used should be a Row
body: Scaffold(
body: Card(
margin: EdgeInsets.all(20),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,//this line is important for providing equal space
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 5,
),
Text("spots",
style:
TextStyle(color: Colors.black.withOpacity(0.6)))
],
),
],
),
),
),
))),


Card(
margin: const EdgeInsets.all(20),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Text',
style: TextStyle(fontSize: 18),
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"spots",
style: TextStyle(
color: Colors.black.withOpacity(0.6),
),
),
const Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
const SizedBox(
height: 5,
),
const Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
],
),
),
),
),


return Scaffold(
body: Card(
margin: EdgeInsets.all(20),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
Text("spots",
style:
TextStyle(color: Colors.black.withOpacity(0.6))),
Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
],
),
),
),
));
Output

Related

Dart Flutter bears writing

I placed a post like this. When the text did not fit, it did not pass when it should have been on the bottom line.
Code:
body: Container(
padding: EdgeInsets.all(10),
child: Container(
height: 150,
decoration: BoxDecoration(
color: Colors.black
),
padding: EdgeInsets.all(10),
child: Container(
height: 180,
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 2),
),
child: Row(
children: [
Padding(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Soru sor, kazan", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),),
Text("SorSor! uygulaması ile soru sor, para kazan! Tek amacın yaşadığın sorunları soru olarak açmak ve diğer kullanıcıların sorularını yanıtlamak.", style: TextStyle(fontSize: 16, color: Colors.white),),
],
),
),
],
),
),
)
)
I want it to go to the bottom line when there is no space left. How can I do it?

Just remove the Row widget that you have above the Padding and the issue will gone.
Container(
height: 180,
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 2),
),
child: Padding(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Soru sor, kazan",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white),
),
Text(
"SorSor! uygulaması ile soru sor, para kazan! Tek amacın yaşadığın sorunları soru olarak açmak ve diğer kullanıcıların sorularını yanıtlamak.",
style: TextStyle(fontSize: 16, color: Colors.white),
),
],
),
),
),

Single Child Scroll View not working for Bottom Overflowed Pixels

My widgets just overflowed by 18 pixels, and when I add SingleChildScrollView() my screen just goes blank and every widget becomes invisible.
As shown in above img my widgets are overflowed by 18 pixels.
Here is my code for that :
(Note that I have added Common card widget in the same file, so the code may look lengthy but it's just repeated code)
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class home extends StatefulWidget {
const home({Key? key}) : super(key: key);
#override
_homeState createState() => _homeState();
}
class _homeState extends State<home> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue[900],
resizeToAvoidBottomInset: true,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 10.0,
),
Container(
padding: EdgeInsets.only(
top: 55.0, left: 30.0, right: 30.0, bottom: 30.0),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/Circles.png'),
fit: BoxFit.cover,
)),
child: Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Control',
style: TextStyle(
color: Colors.white,
fontSize: 40.0,
fontWeight: FontWeight.w700,
),
),
Text(
'Panel',
style: TextStyle(
color: Colors.white,
fontSize: 40.0,
fontWeight: FontWeight.w700,
),
),
],
),
SizedBox(
width: 150,
),
CircleAvatar(
radius: 25.0,
)
],
),
),
Expanded(
child: Container(
width: double.infinity,
padding: EdgeInsets.symmetric(horizontal: 20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35.0),
topRight: Radius.circular(35.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30.0,
),
Text(
'All Rooms',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.blue[900]),
),
SizedBox(
height: 20.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Image(
image: AssetImage('assets/bed.png'),
),
SizedBox(
height: 15.0,
),
Text(
'Bed Room ',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
Text(
'4 Lights',
style: GoogleFonts.mPlusRounded1c(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.yellow[700]),
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image(
image: AssetImage('assets/room.png'),
),
SizedBox(
height: 15.0,
),
Text(
'Living Room',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
Text(
'2 Lights',
style: GoogleFonts.mPlusRounded1c(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.yellow[700]),
),
],
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Image(
image: AssetImage('assets/kitchen.png'),
),
SizedBox(
height: 15.0,
),
Text(
'Kitchen ',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
Text(
'5 Lights',
style: GoogleFonts.mPlusRounded1c(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.yellow[700]),
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image(
image: AssetImage('assets/bathtube.png'),
),
SizedBox(
height: 15.0,
),
Text(
'Bath Room ',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
Text(
'1 Light',
style: GoogleFonts.mPlusRounded1c(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.yellow[700]),
),
],
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Image(
image: AssetImage('assets/house.png'),
),
SizedBox(
height: 15.0,
),
Text(
'Outdoor ',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
Text(
'5 Lights',
style: GoogleFonts.mPlusRounded1c(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.yellow[700]),
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image(
image: AssetImage('assets/balcony.png'),
),
SizedBox(
height: 15.0,
),
Text(
'Balcony ',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
Text(
'2 Lights',
style: GoogleFonts.mPlusRounded1c(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.yellow[700]),
),
],
),
),
),
],
),
],
)
],
),
),
),
Text('Bottom nav bar')
],
),
);
}
}
And when I wrap the widget with SingleChildScrollView() my screen goes blank as shown below:
Can anyone tell why it's happening and how can I resolve this?
Any help will be much appreciated :)

Try below code hope its helpful to you, Wrap your Column inside SingleChildScrollView refer documentaion here,
Just change my icons with your images
Scaffold(
backgroundColor: Colors.blue[900],
resizeToAvoidBottomInset: true,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 10.0,
),
Container(
padding: EdgeInsets.only(
top: 55.0, left: 30.0, right: 30.0, bottom: 30.0),
child: Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Control',
style: TextStyle(
color: Colors.white,
fontSize: 40.0,
fontWeight: FontWeight.w700,
),
),
Text(
'Panel',
style: TextStyle(
color: Colors.white,
fontSize: 40.0,
fontWeight: FontWeight.w700,
),
),
],
),
SizedBox(
width: 150,
),
CircleAvatar(
radius: 25.0,
)
],
),
),
Expanded(
child: Container(
width: double.infinity,
padding: EdgeInsets.symmetric(horizontal: 20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35.0),
topRight: Radius.circular(35.0),
),
),
child: SingleChildScrollView(//Your SingleChildScrollView Widget
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30.0,
),
Text(
'All Rooms',
),
SizedBox(
height: 20.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Bed Room ',
),
Text(
'4 Lights',
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Living Room',
),
Text(
'2 Lights',
),
],
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Kitchen ',
),
Text(
'5 Lights',
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Bath Room ',
),
Text(
'1 Light',
),
],
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Kitchen ',
),
Text(
'5 Lights',
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Bath Room ',
),
Text(
'1 Light',
),
],
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Kitchen ',
),
Text(
'5 Lights',
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Bath Room ',
),
Text(
'1 Light',
),
],
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Outdoor ',
),
Text(
'5 Lights',
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Balcony ',
),
Text(
'2 Lights',
),
],
),
),
),
],
),
],
)
],
),
),
),
),
Text('Bottom nav bar')
],
),
);
Your Result Screen look like ->

Container design structure - Flutter

I have the following problem when designing, inside a container I have elements that I want to organize like the following design:
until I managed to write this code:
return Container(
child: ListView(
controller: controller,
children: [
Center(
child: Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
height: 3,
width: 50,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.3),
borderRadius: BorderRadius.circular(5)
),
),
),
SizedBox(
height: 20,
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
//Text('Recorrido',style: TextStyle(color: Colors.black,fontWeight: FontWeight.bold)),
ClipOval(
child: Image.asset(
"assets/img/findout/friends2.jpg",
width: 50,
height: 50,
fit: BoxFit.cover,
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
textDirection: TextDirection.ltr,
children: [
Text('Ubicacion',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold
)
),
Text('Molina, Vieja',
style: TextStyle(color: Colors.black)
)
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
textDirection: TextDirection.ltr,
children: [
Text('Mitsubishi',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold
)
),
Text('FRT-674',
style: TextStyle(color: Colors.black)
)
],
),
SizedBox(
height: 20,
)
],
),
),
Center(
child: Text(
'Informacion del Vehiculo',
style: TextStyle(color: Colors.black),
),
),
Container(
height: 150,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
FaIcon(
FontAwesomeIcons.clock,
size: 40,
),
Text(
'10.2',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 15
),
),
Text(
'Horas Corridos',
style: TextStyle(color: Colors.white),
)
],
),
Column(
children: [
FaIcon(
FontAwesomeIcons.tachometerAlt,
size: 40,
),
Text(
'30 KM',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold
),
),
Text(
'Total Distancia',
style: TextStyle(color: Colors.white),
)
],
),
Column(
children: [
FaIcon(
FontAwesomeIcons.thermometerQuarter,
size: 40,
),
Text(
'20',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold
),
),
Text(
'Combustible',
style: TextStyle(color: Colors.white),
)
],
)
],
),
decoration: BoxDecoration(
color: colorPrimario,
borderRadius: BorderRadius.circular(15)
),
)
],
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 1), // changes position of shadow
),
],
),
);
the result obtained has been this has this error in design:
How could you correct this design in a correct way and achieve that design?.
thanks for your help.

Try adding some padding to the container which has the row as a child
Container(
height: 150,
padding: EdgeInsets.only(top: 20),
child: Row(
),
),

To fix blue container:
Set crossAxisAlignment of the row to: crossAxisAlignment.Center
For every column in the row, set mainAxisAlignment to mainAxisAlignment.spaceEvenly

first body Container set padding:
body: Container(
padding: const EdgeInsets.all(10.0),
child: ListView(
For Row with icon use Row with Expended Widget:
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
flex: 2,
child: Container(
child: Row(
children: [
ClipOval(
child: Image.asset(
"assets/img/findout/friends2.jpg",
width: 50,
height: 50,
fit: BoxFit.cover,
),
),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
textDirection: TextDirection.ltr,
children: [
Text('Ubicacion',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold
)
),
Text('Molina, Vieja',
style: TextStyle(color: Colors.black)
)
],
),
)
],
),
)
),
Expanded(
flex: 1,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
textDirection: TextDirection.ltr,
children: [
Text('Mitsubishi',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold
)
),
Text('FRT-674',
style: TextStyle(color: Colors.black)
)
],
),
)
)
],
),
)
blue Container:
Container(
height: 150,
padding: const EdgeInsets.all(5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FaIcon(
FontAwesomeIcons.clock,
size: 40,
),
Text(
'10.2',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 15
),
),
For every Column add mainAxisAlignment: MainAxisAlignment.center,

Align Items inside Row in flutter

I am new to flutter. I trying to design as in the image below. But I could not align the items inside the Row and could not give shape to like the layout below in the image. I have tried giving properties like mainAxisAlignment and crossAxisAlignment but could not get the expected result as in the image below.
Only I could able to get Image below.
I have implemented my code as follows:
Container(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Checkbox(
checkColor: Colors.white,
activeColor: Colors.green,
value: true,
onChanged: (value) {
print(value);
}),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.all(
Radius.circular(20))),
child: Image.network(
bannerWomenFashion[i],
height: 100,
width: 100,
fit: BoxFit.scaleDown,
)),
SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.start,
children: <Widget>[
Text(
"Rs 1200",
style: TextStyle(
color: CustomColor
.themeSecondary,
fontSize: 18,
fontWeight:
FontWeight.bold),
),
SizedBox(
height: 5,
),
Text(
"The Pursuit of Happiness",
style: TextStyle(
color: Colors.blueGrey,
fontSize: 20,
fontWeight:
FontWeight.bold),
),
SizedBox(
height: 5,
),
Text("ID: #254217",
style: cartBlueGreyStyle),
],
),
),
Expanded(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment:
CrossAxisAlignment.end,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.remove,
size: 25,
color: Colors.blueGrey,
),
Container(
width: 30,
height: 25,
decoration: BoxDecoration(
borderRadius:
BorderRadius
.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(
color:
Colors.grey,
spreadRadius: 2),
],
),
child: Center(
child: Text("1"))),
Icon(
Icons.add,
size: 25,
color: Colors.blueGrey,
),
],
),
],
)),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(20),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.white,
spreadRadius: 2),
],
),
child: Center(
child: Icon(Icons.clear,
color: Colors.blueGrey),
)),
],
),
],
),
);

Container(
padding: EdgeInsets.all(32.0),
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Stack(
overflow: Overflow.visible,
children: [
Container(
padding: EdgeInsets.all( 8.0),
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(12))),
child: Image.network(
'http://covertopia.com/wp-content/uploads/2015/05/000227_Alt.jpg'
/*bannerWomenFashion[i]*/,
height: 100,
fit: BoxFit.scaleDown,
)),
Positioned(
top: -12,
left: -12,
child: Container(
width: 32,
height: 32,
decoration: BoxDecoration(color: Colors.green, borderRadius: BorderRadius.all(Radius.circular(12))),
child: Checkbox(
checkColor: Colors.white,
activeColor: Colors.green,
value: true,
onChanged: (value) {
print(value);
}),
),
)
],
),
SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Rs 1200",
style: TextStyle(
color: Colors.red /*CustomColor
.themeSecondary*/
,
fontSize: 18,
fontWeight: FontWeight.bold),
),
SizedBox(height: 10,),
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"The Pursuit of Happiness",
style: TextStyle(color: Colors.blueGrey, fontSize: 20, fontWeight: FontWeight.bold),
),
),
),
SizedBox(height: 10,),
Row(
children: [
Text("ID: #254217", style: TextStyle(color: Colors.grey, fontWeight: FontWeight.bold) /*cartBlueGreyStyle*/),
Spacer(),
Row(
children: <Widget>[
Icon(
Icons.remove,
size: 25,
color: Colors.blueGrey,
),
Container(
width: 30,
height: 25,
margin: EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.blueGrey.withOpacity(0.1), spreadRadius: 2),
],
),
child: Center(child: Text("1"))),
Icon(
Icons.add,
size: 25,
color: Colors.blueGrey,
),
],
)
],
),
],
),
),
Container(
width: 30,
height: 30,
margin: EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.white, spreadRadius: 2),
],
),
child: Center(
child: Icon(Icons.clear, color: Colors.blueGrey,size: 16,),
)),
],
),
),
);

How can i make my Scaffold widget scrollable so i would not have a "Bottom overflowed by xx Pixels" Error

I have a flutter app, and i am trying to make it scrollable, because i am getting a
"Bottom overflowed by 34 Pixels", which i am sure is caused when my widget scrolls below the apportioned height of the screen, how can i solved this issue:
i followed this question to solve the issue, but noting happened :
this is my code:
return ListView(
children: <Widget>[
new Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
colorFilter: new ColorFilter.mode(
Colors.black.withOpacity(0.3), BlendMode.dstATop),
image: AssetImage('images/space.gif'),
fit: BoxFit.cover,
),
),
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 200.0, left: 40.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Start",
style: TextStyle(
decoration: TextDecoration.none,
color: Colors.black,
fontSize: 30.0,
),
),
Text(
"Your",
style: TextStyle(
decoration: TextDecoration.none,
color: Colors.black,
fontSize: 30.0,
),
),
Text(
"Adventure",
style: TextStyle(
fontWeight: FontWeight.bold,
decoration: TextDecoration.none,
color: Colors.black,
fontSize: 30.0,
),
),
],
),
),
new Container(
width: MediaQuery.of(context).size.width,
margin:
const EdgeInsets.only(left: 30.0, right: 30.0, top: 100.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new RaisedButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0)),
color: Colors.blue,
onPressed: () => gotoSignup(),
child: new Container(
padding: const EdgeInsets.symmetric(
vertical: 20.0,
horizontal: 20.0,
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: Text(
"SIGN UP",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
],
),
),
new Container(
width: MediaQuery.of(context).size.width,
margin:
const EdgeInsets.only(left: 30.0, right: 30.0, top: 30.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new RaisedButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0)),
color: Colors.redAccent,
onPressed: () => gotoLogin(),
child: new Container(
padding: const EdgeInsets.symmetric(
vertical: 20.0,
horizontal: 20.0,
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: Text(
"LOGIN",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
],
),
),
],
),
)
],
);

Solved this by removing the height: MediaQuery.of(context).size.height, attribute in the first container widget