How to set same alignment for these two text - flutter

How do I make the second text align with the first text. Excerpt of the code is below
Padding(
padding: EdgeInsets.only(top: 20, bottom: 20, left: 10),
child: Column(
children: [
Container(
child: Text(
document.data()['Product Title'],
style: TextStyle(
color: Colors.black
),
),
),
SizedBox(height: 10,),
Container(
child: Text(
document.data()['Product Price'],
style: TextStyle(
color: Colors.black,
),
),
),
Container(
decoration: BoxDecoration(
color: Palette.mainColor,
borderRadius: BorderRadius.circular(8)
),
),
],
),
),
This is how it is at the moment

set the column crossAxisAlignment: CrossAxisAlignment.start

Set CrossAxisAlignment property to Column Widget.
Your Column Widget Should be like this after applying this property.
Column(
crossAxisAlignment: CrossAxisAlignment.start
children: [
Container(
child: Text(
document.data()['Product Title'],
style: TextStyle(
color: Colors.black
),
),
),
SizedBox(height: 10,),
Container(
child: Text(
document.data()['Product Price'],
style: TextStyle(
color: Colors.black,
),
),
),
],
),

Add alignment property to your container.
alignment: Alignment.centerLeft,
Edit:
Ok, I got the problem. #M.M.Hasibuzzaman is right. You need to add crossAxisAlignment: CrossAxisAlignment.start. The correct solution with full code:
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
Column(
children: [
Container(
width: 80,
height: 80,
alignment: Alignment.centerLeft,
child: Image.network(
'https://cdn.friendlystock.com/wp-content/uploads/2020/06/2-loud-speaker-cartoon-clipart.jpg',
)),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
"Loud Speaker",
// textAlign: TextAlign.start,
style: TextStyle(color: Colors.black),
),
],
),
SizedBox(
height: 10,
),
Row(
children: [
Text(
"GHS6758",
textAlign: TextAlign.start,
style: TextStyle(
color: Colors.black,
),
),
],
),
Container(
decoration: BoxDecoration(
color: Colors.red, //Palette.mainColor,
borderRadius: BorderRadius.circular(8),
),
),
],
),
],
),
);
}

Related

TextButton reduces size of child?

I had implemented a column which has a padding of 16px horizontally, and a child container being one of the children. However, i wanted the whole container to be click-able so wrapped it with a TextButton, as a result its width shrunk somewhat, what can i do to restore it back to original while keeping the entire container as a Button?
Here is the code for the concerned widget:
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Column(
children: [
Row(
children: [
Text("Add an item",
style: TextStyle(
color: Colors.black,
fontSize: 34,
fontWeight: FontWeight.w700,
letterSpacing: -1.5)),
Expanded(child: SizedBox(width: 1))
],
),
SizedBox(height: 16),
TextButton(
child: Container(
width: double.infinity,
height: 460,
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.image_rounded,
color: Colors.grey.shade200,
),
],
),
),
onPressed: () {},
)
],
),
)
Replace the TextButton with GestureDetector, like:
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Column(
children: [
Row(
children: [
Text("Add an item",
style: TextStyle(
color: Colors.black,
fontSize: 34,
fontWeight: FontWeight.w700,
letterSpacing: -1.5)),
Expanded(child: SizedBox(width: 1))
],
),
SizedBox(height: 16),
GestureDetector(
child: Container(
width: double.infinity,
height: 460,
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.image_rounded,
color: Colors.grey.shade200,
),
],
),
),
onTap:(){}
)
],
),
)
it would look something like:

Flutter DrawerHeader Text Overflow

I have this issue with my Flutter UI. I'm trying to make my text break when it's too long, but the overflow ellipsis doesn't work. Can you help me please?
issue picture:
this is what i'm looking for:
My code:
static Drawer myDrawer (BuildContext context, String mode, String businessName) {
return Drawer(
child: Container(
child: ListView(
padding: EdgeInsets.only(top:0),
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.17,
child: CustomPaint(
painter: DrawerHeaderPaint(),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(width: 25),
CircleAvatar(
backgroundColor: Colors.white,
radius: 30,
child: Image(
height: 40,
image: AssetImage('assets/logo.png')
),
),
SizedBox(width: 10),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Companny',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w900,
fontSize: 25
),
),
Container(
color: Colors.red,
child: Row(
children: [
Icon(Icons.apartment, color: Color(0xff263d67)),
Text(
'Business Name tooooo loooooong',
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: false,
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xffd7d7d7),
fontWeight: FontWeight.w700,
fontSize: 16,
),
),
],
),
)
],
),
],
),
),
),
SizedBox(height: 40),
menuOptions(),
],
)
],
),
)
);
}
Try wrapping Business Info Column with Expanded widget and also wrap Text widget after apartment icon with Expanded widget, like so:
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'My Companny',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w900,
fontSize: 25,
), //TextStyle
), //Text
Container(
color: Colors.red,
child: Row(
children: const [
Icon(Icons.apartment, color: Color(0xff263d67)),
Expanded(
child: Text(
'Business Name tooooo loooooong',
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: false,
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xffd7d7d7),
fontWeight: FontWeight.w700,
fontSize: 16,
), //TextStyle
), //Text
), //Expanded
],
), //Row
), //Container
],
), //Column
), //Expand
Use a Expanded or Flexible
Expanded(
child:
Text('Business Name tooooo loooooong',...))
//you can use the SizedBox widget and specify your text width it helps to ellipsis the text. Hope this code will help you.Thanks
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Dermo extends StatefulWidget {
const Dermo({Key? key}) : super(key: key);
#override
_DermoState createState() => _DermoState();
}
class _DermoState extends State<Dermo> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
)
,
drawer: Drawer(
backgroundColor: Colors.green,
child: Container(
child: ListView(
padding: EdgeInsets.only(top: 0),
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.17,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(width: 25),
CircleAvatar(
backgroundColor: Colors.white,
radius: 30,
child: Image(
height: 40, image: AssetImage('assets/logo.png')),
),
SizedBox(width: 10),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Companny',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w900,
fontSize: 25),
),
Container(
color: Colors.red,
child: Row(
children: [
Icon(Icons.apartment, color: Color(0xff263d67)),
///if you want to show complete text use can comment
///out overflow,softWrap and maxLines otherwise you can use all
///these properties it ellipsis the text
SizedBox(
width: 160,
child: Text(
'Business Name tooooo loooooong',
/* overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: false,*/
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xffd7d7d7),
fontWeight: FontWeight.w700,
fontSize: 16,
),
),
),
],
),
)
],
),
],
),
),
SizedBox(height: 40),
],
)
],
),
)));
}
}

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,

Flutter text left alignment

I'm trying to align all the text to left. However, it's in the middle always as you can see the image below. I've tried using Align widget and setting textAlign property on Text widget to TextAlign.left but no luck.
card.dart
Row(
children: <Widget>[
Card(
elevation: 2,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(4)),
child: Image.network('https://loremflickr.com/100/100'),
),
),
Padding(
padding: const EdgeInsets.only(left: 8),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
'Marry Jane',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 16),
),
),
Align(
alignment: Alignment.centerLeft,
child: Text(
'Make-up Artist',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 14, color: Color(0xff666666)),
),
),
Row(
children: <Widget>[
Text(
'3.5',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 18, color: Color(0xff666666)),
),
Icon(FontAwesomeIcons.starHalf)
],
)
],
),
)
],
),
Have you tried giving the Column CrossAxisAlignment.start?
Row(
children: <Widget>[
Card(
elevation: 2,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(4)),
child: Image.network('https://loremflickr.com/100/100'),
),
),
Padding(
padding: const EdgeInsets.only(left: 8),
child: Column(
/// Add this
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Marry Jane',
style: TextStyle(fontSize: 16),
),
Text(
'Make-up Artist',
style: TextStyle(fontSize: 14, color: Color(0xff666666)),
),
Text(
'3.5',
style: TextStyle(fontSize: 18, color: Color(0xff666666)),
),
],
),
)
],
)