Flutter text left alignment - flutter

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)),
),
],
),
)
],
)

Related

Wrapping a Row of Texts with Colored Rounded Box

Based on the code below, how does one wrap around a row of texts in a container? (as shown in the image). And also, how to make the container slightly rounded as shown in the image?
When I wrap it in a container, why does it takes up the full width of the app from left to right, which is not what I am trying to achieve.
Thank you in advance.
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
child: Expanded(
child: PageView(
controller: _pageController,
onPageChanged: (page) {
setState(() {
currentIndex = page;
});
},
children: [
SingleChildScrollView(
child: Column(
children: [
Container(
padding: EdgeInsets.only(
top: 0, left: 220, right: 30, bottom: 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Expanded(
flex: 7,
child: Text(
'187,177.33',
style: GoogleFonts.openSans(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
),
SizedBox(width: 10),
Expanded(
flex: 4,
child: Text(
'82',
style: GoogleFonts.openSans(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
),
],
),
),
],
),
),
],
),
),
),
],
),
);
}

Use decoration on Container. Also reduce the padding,
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(12)),
child: Row(
return Scaffold(
body: Column(
children: [
Container(
child: Expanded(
child: PageView(
// controller: _pageController,
onPageChanged: (page) {
setState(() {
// currentIndex = page;
});
},
children: [
SingleChildScrollView(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Expanded(
flex: 7,
child: Text(
'187,177.33',
style: GoogleFonts.openSans(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
),
SizedBox(width: 10),
Expanded(
flex: 4,
child: Text(
'82',
style: GoogleFonts.openSans(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
),
],
),
),
),
],
),
),
],
),
),
),
],
),
);
}
More information about Container and layout

Container has property which called decoration, It would does the job for you, Try this:
Container(
margin: EdgeInsets.all(16),
padding:
EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(8)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'187,177.33',
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
SizedBox(width: 10),
Text(
'82',
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
],
),
)

How to place image & textfiled both at center in flutter

How to place image & textfield both at center in flutter.
Below is code what i have tried so far any help is appreciated!
Container(
child: Padding(
padding: const EdgeInsets.only(top: 32.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: Image.asset(
'images/Warning.png',
),
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Container(
alignment: Alignment.center,
child: Text(
'OTP is valid for 5 minutes only.',
style: TextStyle(
color: Color(0xFF4B4B4B),
fontSize: 12,
fontFamily: 'Soleil_Regular',
),
),
),
),
],
),
),
),
trying as some thing shown in the picture both text & image is in same line any help is appreciated!

Simple way of doing it by using RichText
RichText(
textAlign: TextAlign.center,
text: TextSpan(children: [
WidgetSpan(child: Icon(Icons.ac_unit)), // use image in your case instead of icon
TextSpan(text: "This is Text")
]))
Full Snippet
Container(
child: Padding(
padding: const EdgeInsets.only(top: 32.0),
child: Text.rich(TextSpan(
style: TextStyle(
color: Color(0xFF4B4B4B),
fontSize: 12,
fontFamily: 'Soleil_Regular'),
children: [
WidgetSpan(
child: Image.asset(
'images/Warning.png',
alignment: Alignment.center,
),
),
WidgetSpan(
child: SizedBox(
width: 10,
)),
TextSpan(
text: 'OTP is valid for 5 minutes only.',
),
],
)),
),
),

Give your image a size and you will get your result
Container(
child: Padding(
padding: const EdgeInsets.only(top: 32.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: Image.network(
'http://orbitsystemsinc.com/images/banner-round-bg.png',width: 40,height: 40,
),
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Container(
alignment: Alignment.center,
child: Text(
'OTP is valid for 5 minutes only.',
style: TextStyle(
color: Color(0xFF4B4B4B),
fontSize: 12,
fontFamily: 'Soleil_Regular',
),
),
),
),
],
),
),
)

How to set same alignment for these two text

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),
),
),
],
),
],
),
);
}

Flutter align widget to centre and another to the right - impossible

I'm trying to do something which should be extremely simple but can't see how it is done.
I need to align the large text to the centre and the buttons to the right so it looks like image below:
With the code below the widgets are aligned left and right:
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colour.darkBlue, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Centred', style: TextStyle(fontSize: 32)),
Text('24.6 %', style: TextStyle(fontSize: 48)),
],
),
Container(
margin: EdgeInsets.only(left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 18)),
Text('BtnB', style: TextStyle(fontSize: 18)),
Text('BtnC', style: TextStyle(fontSize: 18)),
],
),
),
],
),
),
I tried the following method:
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colour.darkBlue, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(child: Container()),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Centred', style: TextStyle(fontSize: 32)),
Text('24.6 %', style: TextStyle(fontSize: 48)),
],
),
),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 18)),
Text('BtnB', style: TextStyle(fontSize: 18)),
Text('BtnC', style: TextStyle(fontSize: 18)),
],
),
),
),
],
),
),
But it resulted in this:
Not sure how or whether it can be done without manually setting a width for the container on the left which is clearly a far from ideal method. Flutter seems to desperately need float:right...

You was almost there. Just "Expanded" in the middle should be removed:
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(child: Container()),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Centred', style: TextStyle(fontSize: 32)),
Text('24.6 %', style: TextStyle(fontSize: 48)),
],
),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 18)),
Text('BtnB', style: TextStyle(fontSize: 18)),
Text('BtnC', style: TextStyle(fontSize: 18)),
],
),
),
),
],
),
),

Try with ListTile Widget, I have made changes using ListTile, please check if it works for you
Center(
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.only(top: 10),
padding: EdgeInsets.all(15),
width: 300,
height: 150,
decoration: BoxDecoration(
border: Border.all(color: Colors.blue, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: ListTile(
title: Text('Centred',
textAlign: TextAlign.center, style: TextStyle(fontSize: 30)),
subtitle: Text('24.6 %',
textAlign: TextAlign.center, style: TextStyle(fontSize: 48)),
trailing: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 15)),
Text('BtnB', style: TextStyle(fontSize: 15)),
Text('BtnC', style: TextStyle(fontSize: 15)),
],
),
),
),
)

child: Center(
child: Container(
width: 300,
height: 150,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: Container(
child: Stack(
children: <Widget>[
Center(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: Text('Centred',
style: TextStyle(fontSize: 32)),
),
Flexible(
child: Text('24.6 %',
style: TextStyle(fontSize: 48)),
),
],
),
),
),
Align(
alignment: Alignment.centerRight,
child: Container(
margin: const EdgeInsets.only(right: 16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 15)),
Text('BtnB', style: TextStyle(fontSize: 15)),
Text('BtnC', style: TextStyle(fontSize: 15)),
],
),
),
)
],
),
),
),
),

Flutter: How to place a button in the middle of 2 containers?

UI Layout
If the purple area is inside an Expanded widget, how would I go about to position the button? I've implemented that UI by setting a fixed height to the purple container but haven't been able to understand how to achieve the same effect if the height is variable, depending on the content.
I was able to get close by using Stack and Positioned widgets but then the button is not really clickable. If anyone can give me a general idea on how to achieve the desired goal I would be thankful.
Here's my attempt (demo case)
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
flex: 1,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.redAccent,
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Stack(
children: <Widget> [
Padding(
padding: const EdgeInsets.only(bottom: 40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(
Icons.book,
color: Colors.white,
size: 40.0
),
Container(
width: 90.0,
child: new Divider(color: Colors.white),
),
Text(
"Some random text -",
style: TextStyle(color: Colors.white, fontSize: 25.0),
),
Padding(
padding: const EdgeInsets.only(top: 8.0, right: 70.0),
child: Row(
children: <Widget>[
Flexible(
child: Text(
'More random text that can vary a lot!',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Row(
children: <Widget>[
Text(
'Random text ',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Row(
children: <Widget>[
Text(
'Random',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
),
Positioned(
bottom: 0.0,
left: MediaQuery.of(context).size.width - 100.0,
child: FractionalTranslation(
translation: const Offset(0.0, 0.8),
child: FloatingActionButton(
backgroundColor: Colors.white,
foregroundColor: Colors.redAccent,
child: new Icon(
Icons.map
),
onPressed: () {
},
),
),
),
]
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 8.0, left: 8.0),
child: Row(
children: <Widget>[
Flexible(
child: Text(
"Random text",
style: new TextStyle(
fontFamily: 'Raleway',
fontSize: 16.0,
color: Colors.black38
)
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Random text - long text",
style: new TextStyle(
fontFamily: 'Raleway',
fontSize: 18.0
)
),
),
],
)
],
)
),
),
],
);

Explaining what I described in the comments:
You can use the FractionalTranslation widget to shift your FAB half way down.
FractionalTranslation(translation: Offset(0, .5), child: FloatingActionButton(...))
This requires you to have it positioned at the bottom of the purple area (referring to your screenshot) beforehand, but I assume that you have that figured out.