Flutter Row Not Aligning to the Left - flutter

I'm having trouble aligning a row with text to the left of a column.
The layout looks like the following:
However, I would like the user's name ("Peter Jonathan") and the user's handle ("#pj"), to align to the left most side. Any advice on how I can do this?
Here is the current code I have:
class ProfilePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
elevation: 0.0,
// title: Text('Profile'),
),
body: new Container(
padding: EdgeInsets.fromLTRB(25.0, 0.0, 25.0, 10.0),
child: new Column(
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Container(
width: 100.0,
height: 100.0,
child: new Center(
child: new Text(
"PJ",
style: new TextStyle(fontSize: 40.0),
),
),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: new Border.all(color: Colors.purple),
),
),
new Column(
children: <Widget>[
new Row(
children: <Widget>[
new Padding(
padding: EdgeInsets.all(10.0),
child: new Column(
children: <Widget>[
new Text(
'100',
style: new TextStyle(fontSize: 20.0),
),
new Text('Followers'),
],
),
),
new Padding(
padding: EdgeInsets.all(10.0),
child: new Column(
children: <Widget>[
new Text(
'100',
style: new TextStyle(fontSize: 20.0),
),
new Text('Following'),
],
),
),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Text("Peter Jonathan",
style: new TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.left,
),
],
),
new Row(
children: <Widget>[
new Text("#pj",
style: new TextStyle(
fontSize: 18.0,
fontStyle: FontStyle.italic,
color: Color.fromRGBO(155, 155, 155, 1.0),
),
),
],
)
],
),
],
),
],
),
),
);
}
}
I've heard that using a flexible is key, but when I do that it's not compiling correctly. Do I need to wrap the name and handle in containers?

In your Code under second Column: Add - crossAxisAlignment: CrossAxisAlignment.start,
new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[],
....

Related

Centring a Column inside another Column in Flutter

I'm currently writing my first Flutter App and I got a little stuck here. Basically what I'm trying to do is display an image at the top of the screen (with 100px top-margin) and display a Column which contains some Text and a Button on the centre of the screen. I tried moving mainAxisAlignment crossAxisAlignment into the outer Column Widget but that centres everything.
Here's my code:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Column(
children: [
Opacity(
opacity: 0.25,
child: Container(
child: Image.asset('assets/images/logo.png'),
margin: EdgeInsets.only(top: 100),
width: 75,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Please enter your first name:'),
TextButton(onPressed: () {}, child: Text('Submit'))
],
)
],
),
),
);
You actually only need to wrap the second column in an Expanded widget, "so that the child fills the available space", that's all:
Column(
children: [
Expanded(
child: Column(
children: [],
),
)],
),
try, wrap your second Column inside a Center widget.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Column(
children: [
Opacity(
opacity: 0.25,
child: Container(
child: Image.asset('assets/images/logo.png'),
margin: EdgeInsets.only(top: 100),
width: 75,
),
),
Center(
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Please enter your first name:'),
TextButton(onPressed: () {}, child: Text('Submit'))
],
)
],
),
),
),
);
If this doesn't work you could also wrap it in an Align widget and add the alignment property to it.
Align(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Please enter your first name:'),
TextButton(onPressed: () {}, child: Text('Submit'))
],
),
),
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(),
body: Container(
height: double.infinity,
width: double.infinity,
color: Colors.blue,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 200,
width: 200,
color: Colors.pink,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
),
],
),
),
),
),
);
}
you have to use mainAxisAlignment property to set MainAxisAlignment.center.
In order to center align your second column,
Make sure MainAxisAlignment of your Second Column is MainAxisAlignment.center
Wrap your second column inside a Align Widget
Now, wrap your Align widget with Expanded widget.
This should solve your issue.
Check this refrence.
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: 18.0,
),
const Padding(
padding: EdgeInsets.only(left: 16.0),
child: Text(
'Recent Search(s)',
style: TextStyle(
color: Colors.black,
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
),
Expanded(
child: Align(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
MdiIcons.magnify,
color: Colors.grey.shade600,
size: 72.0,
),
const SizedBox(
height: 8.0,
),
Text(
'Search for places',
style: TextStyle(
fontSize: 14.0,
color: Colors.grey.shade600,
fontWeight: FontWeight.w600),
),
Text(
'You haven\'t serached for any items yet...',
style: TextStyle(
fontSize: 12.0,
color: Colors.grey.shade700,
fontWeight: FontWeight.w500),
),
Text(
'Try now - we will help you!',
style: TextStyle(
fontSize: 12.0,
color: Colors.grey.shade700,
fontWeight: FontWeight.w500),
)
],
),
),
)
],

Divider in AppBar not appearing

I am struggling to figure out why my divider in my app bar is not appearing. When I increase the height of the divider, I notice my widgets move up. I looked at similar issues and none have worked. My appBar consists of two columns and one row for the user profile information and information on their "Partner". I wanted to use the divider to separate the partner name and username from the win/loss ratio.strong text
Widget build(BuildContext context) {
final user = Provider.of<User>(context);
return Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF2430346),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(100.0),
child: Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.only(left:20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_buildUserInfo(user),
Text(
"#username",
style: new TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: Colors.white,
)
)
],
),
),
),
Padding(
padding: const EdgeInsets.only(right:70.0),
child: Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"My Partner",
style: new TextStyle(
fontSize: 24,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
Text(
"Dorian",
style: new TextStyle(
color: Colors.white,
),
),
Text(
"#Doetheman",
style: new TextStyle(
color: Colors.white,
),
),
// Mfer aint appearing
Padding(
padding: const EdgeInsets.only(left: 16, right: 16, top: 10, bottom: 10),
child: Divider(
height: 2.0,
color: Colors.white,
),
),
],
),
),
),
],
),
),
),
),
Widget _buildUserInfo(User user) {
return Column(
children: [
Avatar(
photoUrl: user.photoUrl,
radius: 40,
borderColor: Colors.black54,
borderWidth: 2.0,
),
const SizedBox(height: 8),
if (user.displayName != null)
Text(
user.displayName,
style: TextStyle(color: Colors.white),
),
const SizedBox(height: 8),
],
);
}
}
What I want it to look in view:
enter image description here
Instead of divider you can use container like this
Container(
alignment: Alignment.center,
width: 250,
height: 1,
color: Colors.black
),
Use IntrinsicWidth widget to wrap Column
IntrinsicWidth(
child: Column(
children: [
// ....
Divider(),
],
),
)

card view and layout in flutter

i am trying to accomplish layout where components are overlay in flutter but im having problem.
here is the code that i have so far
import 'package:flutter/material.dart';
class FirstFragment extends StatelessWidget {
_getSizes() {
}
_getPositions(){
}
#override
Widget build(BuildContext context) {
return new Container(
constraints: new BoxConstraints.expand(
height: 200.0,
),
padding: new EdgeInsets.only(left: 0.0, bottom: 8.0, right: 16.0),
decoration: new BoxDecoration(
color: Colors.blue,
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
textDirection: TextDirection.rtl,
children: [
Text(
'0.00',
style: TextStyle(
color: Colors.white,
fontSize: 50.0,
fontWeight: FontWeight.bold
),
),
Text(
'Current Balance',
style: TextStyle(
color: Colors.white,
fontSize: 26.0,
fontWeight: FontWeight.bold
),
),
new Card(
child: new Column(
children: <Widget>[
new Image.network('https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg'),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Row(
children: <Widget>[
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Icon(Icons.thumb_up),
),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Text('Like',style: new TextStyle(fontSize: 18.0),),
),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Icon(Icons.comment),
),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Text('Comments',style: new TextStyle(fontSize: 18.0)),
)
],
)
)
],
),
)
],
)
);
}
}
when you run the code, you will notice that the card view shrink and doesnt overlay the container. i am looking to do the same as the image below:
notice how the card view with title of Summary is overlay the blue background and then there are other card views below summary card view.
i am getting the following from my code. the card view doesnt overlay like the image above. can someone help? thanks in advance
NOTE: it will be great if anyone can make my card view look like the one in Summary card view in the image above. the one in my code i copied from somewebiste with the goal of making it look like the image above
Remove following from your Container
constraints: new BoxConstraints.expand(
height: 200.0,
)
Add mainAxisSize: MainAxisSize.min to your Column.
new Column(
mainAxisSize: MainAxisSize.min, // add this
crossAxisAlignment: CrossAxisAlignment.center,
children: ...
)
Full solution:
class FirstFragment extends StatelessWidget {
_getSizes() {}
_getPositions() {}
#override
Widget build(BuildContext context) {
return new Container(
padding: new EdgeInsets.only(left: 0.0, bottom: 8.0, right: 16.0),
decoration: new BoxDecoration(color: Colors.blue),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'0.00',
style: TextStyle(color: Colors.white, fontSize: 50.0, fontWeight: FontWeight.bold),
),
Text(
'Current Balance',
style: TextStyle(color: Colors.white, fontSize: 26.0, fontWeight: FontWeight.bold),
),
new Card(
child: new Column(
children: <Widget>[
new Image.network('https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg'),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Row(
children: <Widget>[
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Icon(Icons.thumb_up),
),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Text(
'Like',
style: new TextStyle(fontSize: 18.0),
),
),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Icon(Icons.comment),
),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Text('Comments', style: new TextStyle(fontSize: 18.0)),
)
],
))
],
),
)
],
),
);
}
}

How to create card view with text in front of the image in flutter?

I have spent a couple hours just to create a reusable widget in flutter. My expected result is gonna be like this:
but I'm stuck to fill the opacity width depending on it's parent like this:
here's the code I've tried:
Stack(
children: <Widget>[
Container(
padding: const EdgeInsets.all(12),
child: Image.network(
"https://raw.githubusercontent.com/flutter/website/master/examples/layout/lakes/step5/images/lake.jpg",
fit: BoxFit.cover
)
),
Positioned(
left: 15,
bottom: 15,
child: Container(
decoration: BoxDecoration(
color: Color.fromRGBO(0, 0, 0, 0.5)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text("TITLE", style: new TextStyle(fontSize: 28, color: Colors.white)),
new Text("Sub Title", style: new TextStyle(fontSize: 20, color: Colors.white))
],
),
FlatButton(
color: Colors.red[400],
highlightColor: Colors.red[900],
onPressed: (){},
child: new Text("Book Now", style: new TextStyle(fontSize: 28, color: Colors.white)),
)
],
),
)
)
],
)
any suggestion?
Short answer:
You need to add right property in your Positioned widget. Like this
Positioned(
left: 15,
bottom: 15,
right: 0,
...)
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Title")),
body: Container(
width: 300,
height: 300,
child: Stack(
alignment: Alignment.bottomLeft,
children: <Widget>[
Image.asset(
"assets/images/chocolate_pic.png",
width: 300,
height: 300,
fit: BoxFit.cover,
),
Container(
color: Colors.black.withOpacity(0.5),
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text("Awesome", style: TextStyle(fontSize: 28)),
Text("Chocolate", style: TextStyle(fontSize: 22)),
],
),
)
],
),
),
);
}
Instead of this
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text("TITLE", style: new TextStyle(fontSize: 28, color: Colors.white)),
new Text("Sub Title", style: new TextStyle(fontSize: 20, color: Colors.white))
],
),
FlatButton(
color: Colors.red[400],
highlightColor: Colors.red[900],
onPressed: (){},
child: new Text("Book Now", style: new TextStyle(fontSize: 28, color: Colors.white)),
)
],
),
You can use ListTile widget inside the positioned and container which has title, subtitle and trailing(book now button can be placed here). And make the background color of container to black/white with opacity.

Flutter mainaxisAlignment.spaceEvenly not working on multiple flex(Row & Column)

I am creating a screen like Instagram profile but mainaxisAlignment.spaceEvenly is not working. It works just fine if the row is not inside any other row or column but in this case It didn't.
How can I solve this? Please Help.
Container(
margin: EdgeInsets.all(15.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
margin: EdgeInsets.only(
right: 10.0,
),
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new CachedNetworkImageProvider(
profile.dp,
scale: 100.0,
),
),
),
),
Column(
children: <Widget>[
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
children: <Widget>[
Text(
profile.postcount.toString(),
style: TextStyle(
fontWeight: FontWeight.bold),
),
Text('posts'),
],
),
Column(
children: <Widget>[
Text(
profile.followers.toString(),
style: TextStyle(
fontWeight: FontWeight.bold),
),
Text('followers'),
],
),
Column(
children: <Widget>[
Text(
profile.followings.toString(),
style: TextStyle(
fontWeight: FontWeight.bold),
),
Text('following'),
],
),
],
),
new RaisedButton(
child: Text('Edit Profile'),
onPressed: () {},
),
],
)
],
)
],
)),
Expectation:
Reality:
Here you go
Widget _buildRow() {
return Container(
padding: const EdgeInsets.all(16),
child: Row(
children: <Widget>[
CircleAvatar(
radius: 40,
backgroundImage: AssetImage("your_image_asset"),
),
SizedBox(width: 12),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
children: <Widget>[
Text("2", style: TextStyle(fontWeight: FontWeight.bold)),
Text("Gold", style: TextStyle(color: Colors.grey)),
],
),
Column(
children: <Widget>[
Text("22", style: TextStyle(fontWeight: FontWeight.bold)),
Text("Silver", style: TextStyle(color: Colors.grey)),
],
),
Column(
children: <Widget>[
Text("5464", style: TextStyle(fontWeight: FontWeight.bold)),
Text("Reputation", style: TextStyle(color: Colors.grey)),
],
),
],
),
OutlineButton(onPressed: () {}, child: Text("CopsOnRoad (Edit Profile)")),
],
),
),
],
),
);
}