Flutter different alignment in Column - flutter

I have a column with three rows:
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
print('card of course clicked');
},
child: Card(
shape: RoundedRectangleBorder(borderRadius:
BorderRadius.circular(8.0)),
child: Container(
height: 144,
child: Row(children: [
Padding(
padding: EdgeInsets.all(16.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
child: Image.network(_model._schoolThumb))),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 16),
Align(
alignment: Alignment.center,
child: Text(_model._schoolName,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 18)),
),
SizedBox(height: 12),
Row(
children: <Widget>[
Icon(Icons.location_on, color: Colors.grey[700]),
Container(width: 8),
Text(_model._guides,
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w400)),
],
),
SizedBox(height: 12),
Row(
children: <Widget>[
Icon(Icons.attach_money, color: Colors.grey[700]),
Container(width: 8),
Text(_model._priceFrom,
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w400))
],
)
],
)
]),
),
),
);
}
As a result, I have three rows aligned to start.
How can I align the first Text() in the center? Giving properties to the text and wrapping in Expanded, Container, Stack didn't help, or I did it in the wrong way. Thanks in advance!
EDIT
Whole build() method attached

Problem:
By default, the width of the Column is set to the width of the widest child widget of Column.
Solution:
You need to wrap your Column with either Expanded or Flexible.
Like below.
Expanded(
child: Column(
children: <Widget>[
...
],
),
)
or
Flexible(
child: Column(
children: <Widget>[
...
],
),
)
And then need to use the Align or Center widget to set the alignment to your child widget in your case the Text widget.
Like below:
Align(
alignment: Alignment.center,
child: Text(
"Test",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 18,
),
),
),
or
Center(
child: Text(
"Test",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 18,
),
),
),

UPDATE
You haven't given a width to the column so it does not know the remaining width that it can take. So wrap your column in a flexible which will give it the width remaining to expand.
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 16),
Row(

Related

How can I fix an icon onto the right hand side of a Row?

I am using a Card widget populated with a Row. At the end of the row I use a GFIconButton widget which is the bin and it currently moves depending on the length of the menu item's name. I want the bin to stay at the far right position no matter what the length of the menu item is.
I am already using Alignment.centerRight
Card(
margin: const EdgeInsets.fromLTRB(5, 10, 5, 10), //EdgeInsets.all(10),
color: Colors.white,
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
ClipRect(
child: Align(
alignment: Alignment.centerLeft,
widthFactor: 0.8,
child: Image(
image: AssetImage(itemImg),
height: 100,
width: 70,
fit: BoxFit.cover,
),
)),
const SizedBox(width: 30),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
style: const TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.bold),
),
const SizedBox(height: 5),
Text(
"R$price",
style: const TextStyle(color: Colors.black, fontSize: 17),
),
const SizedBox(height: 5),
Text(
variety,
style: const TextStyle(color: Colors.black, fontSize: 17),
),
],
),
// Container(child: ),
const SizedBox(width: 30),
Text("x" + quantity.toString(),
style: const TextStyle(color: Colors.black, fontSize: 20),
textAlign: TextAlign.end),
const SizedBox(width: 20),
GFIconButton(
alignment: Alignment.centerRight,
onPressed: () async {
//If points are above 0 a reward
//Id hard coded
},
icon: const Icon(
Icons.delete_outline,
color: Colors.black,
textDirection: TextDirection.ltr,
),
type: GFButtonType.transparent,
),
]),
),
Here's the simplest solution:
Card(
child: Row(
children: [
Text('image'),
Text("texts cdppdwpwdpwdpolumn"),
Text('quantity'),
Expanded(child: SizedBox()), //this is crucial- this keeps icon always at the end
Icon(Icons.delete)
],
),
),
You can try to put Spacer between your quantity text widget and icon widget to align your icon widget to far right. For further information you need to include your code to your post.
Either add a relative space between icon and the text or, wrap the icon on the right and everything on the left inside another row and use mainAxisAlignment as spaceBetween
Change your last widgets in row to this:
Expanded(
child: Text("x" + quantity.toString(),
style:
const TextStyle(color: Colors.black, fontSize: 20),
textAlign: TextAlign.start),
),
const SizedBox(width: 20),
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: GFIconButton(
onPressed: () async {
//If points are above 0 a reward
//Id hard coded
},
icon: const Icon(
Icons.delete_outline,
color: Colors.black,
textDirection: TextDirection.ltr,
),
type: GFButtonType.transparent,
),
),
mainAxisAlignment: MainAxisAlignment.SpaceBetween
and check if icon width and set it around 30

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

Flutter layout with listview and column

I am new to flutter, and I'm facing some layout errors that I cannot understand. Does someone knows why this error occurs? I know that Column widget cannot contain the Listview widget so I tried to wrap Listview widget with the Expanded, I cannot understand why the Expanded widget doens't work.
Here is my code. _buildBody function is not the part that error occurs so I will not write it.
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 0, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
"공지",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w700,
fontFamily: "AppleSDGothicNeo",
fontStyle: FontStyle.normal,
fontSize: 16.0),
),
SizedBox(width: 5),
StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance
.collection('Announcement')
.where('concertname', isEqualTo: widget.replay.title)
.snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) return CircularProgressIndicator();
return Text(
snapshot.data.docs.length.toString(),
style: TextStyle(
color: Colors.black26,
fontWeight: FontWeight.w500,
fontFamily: "AppleSDGothicNeo",
fontStyle: FontStyle.normal,
fontSize: 14.0),
);
},
),
],
),
SizedBox(
height: 5,
),
_buildBody(context),
],
),
),
Divider(
height: 30,
thickness: 6,
color: Color(0xffecedf4),
),
Padding(
padding: const EdgeInsets.only(left: 20, right: 20),
child: Column(
children: [
Container(
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"팬 피드",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w700,
fontFamily: "AppleSDGothicNeo",
fontStyle: FontStyle.normal,
fontSize: 16.0),
),
Spacer(),
Text("최신순",
style: const TextStyle(
color: Colors.black26,
fontWeight: FontWeight.w300,
fontFamily: "AppleSDGothicNeo",
fontStyle: FontStyle.normal,
fontSize: 12.0),
textAlign: TextAlign.right),
SizedBox(
child: Icon(
UniconIcon.iconchart,
color: Colors.black26,
),
),
],
),
),
Expanded(
child: ListView(
children: [
CircleAvatar(
backgroundImage: NetworkImage(
"https://lh3.googleusercontent.com/-5L9kDOItRJw/AAAAAAAAAAI/AAAAAAAAAAA/AMZuucmTNvDI3AljkDx1LMhuDaypX57yhA/s96-c/photo.jpg"),
),
CircleAvatar(
backgroundImage: NetworkImage(
"https://lh3.googleusercontent.com/-5L9kDOItRJw/AAAAAAAAAAI/AAAAAAAAAAA/AMZuucmTNvDI3AljkDx1LMhuDaypX57yhA/s96-c/photo.jpg"),
),
CircleAvatar(
backgroundImage: NetworkImage(
"https://lh3.googleusercontent.com/-5L9kDOItRJw/AAAAAAAAAAI/AAAAAAAAAAA/AMZuucmTNvDI3AljkDx1LMhuDaypX57yhA/s96-c/photo.jpg"),
),
],
)),
],
),
),
],
);
}
The problem is that you have two Column widgets here and the first passes unconstrained bounds to its children, hence, despite you using Expanded in the ListView that is inside the second Column (which is correct) you need also to wrap your second Column in a Expanded as well so it knows its constraints.
However, by looking at your code, looks like you are not using the second Column as advantage to nothing and if its because of the Padding just apply it to the first instead, so I recommend you to remove it at all and it should work as well.
Use shrinkWrap:true inside ListView

aligning text inside row in flutter

In my fluttr App, I want to display a text on the left side and a button on the right side of the same row. I gave the proper alignment but still its not coming, can any one let me know where I made the mistake, below is the code
Widget build(BuildContext context) {
return Scaffold(body:SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 80.0,
),
child: Container(
child: Row(children: <Widget>[
new Container(
alignment: Alignment.topLeft,
child: Align(
child: Text(
'Filters',
style: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black54),
),
),
),
Container(
alignment: Alignment.topRight,
child: OutlineButton(
child: Text(
'Reset',
style: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black54),
),
onPressed: null,
)),
]),
))));
}
output of code
how to align filter to left and Reset button to right of the screen?
Thank you
Couple of ways to get it:
1> use mainAxisAlignment: MainAxisAlignment.spaceBetween, in Row()
OR
2> Use Spacer() widget between your widgets.
Code:
Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween, // first way
children: <Widget>[
new Container(
alignment: Alignment.topLeft,
child: Align(
child: Text(
'Filters',
style: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black54),
),
),
),
Spacer(), // second way
Container(
alignment: Alignment.topRight,
child: OutlineButton(
child: Text(
'Reset',
style: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black54),
),
onPressed: null,
)),
])
you can do that by providing an axis alignment to the row.
this will place items on both end of the row
Row{
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:<Widget>[
Text('Left Text'),
OutlineButton(
child:Text('Right Button',),
),
]}
i suggest reading this article to fully understand how layouts work in flutter [https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041][1]
Row{
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children:<Widget>[
Text('Left Text'),
OutlineButton(
child:Text('Right Button',),
),
]}
This should suffice your requirement I suppose