Flutter showing widget by for loop showing error - flutter

I need to call widget multiple time. Mean i am fetching data and showing in a widget by for loop. Issue is when i am showing that widget its showing error
My code
class _CartPageState extends State<CartPage> {
void navigateToAddressPage() {
Get.to(AddressPage());
}
#override
void initState(){
this._query();
}
List<Widget> textWidgetList = List<Widget>();
void _query() async {
print('cart');
final dbHelper = DatabaseHelper.instance;
final allRows = await dbHelper.queryAllRows();
print(allRows);
print('query all rows:');
allRows.forEach((row) => print(row));
for (int i = 0; i < allRows.length; i++) {
textWidgetList.add(
Card(
elevation: 5.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
margin: EdgeInsets.symmetric(vertical: 8.0),
child: Container(
width: double.infinity,
height: 120.0,
padding: EdgeInsets.all(12.0),
child: Row(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(12.0),
child: CachedNetworkImage(
imageUrl:
'https://i.pinimg.com/564x/7f/0f/dc/7f0fdc10a9cb26e78d8e6257e1b06fb6.jpg',
height: 100.0,
width: 100.0,
),
),
SizedBox(width: 12.0),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Text(
'Nike Air Zoom Pegasus 36 Miami',
textAlign: TextAlign.start,
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
),
SizedBox(width: 5.0),
Row(
children: [
GestureDetector(
onTap: () {},
child: Icon(
FlutterIcons.delete_outline_mco,
),
)
],
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
'\$50',
),
),
// Counter(),
],
),
],
),
),
)
],
),
),
)
);
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: buildAppBar(context),
body: Container(
child: SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: 18.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 20.0),
Divider(color: Theme.of(context).accentColor.withOpacity(.5)),
SizedBox(height: 12.0),
Column(children: textWidgetList()),//here is error
SizedBox(height: 20.0),
buildCoupunBox(context),
SizedBox(height: 20.0),
buildPriceBox(context),
SizedBox(height: 18.0),
buildCheckoutButton(),
SizedBox(height: 20.0),
],
),
),
),
);
}
}
Its showing this error The expression doesn't evaluate to a function, so it can't be invoked. How can i solve this error ? I am simply using for loop and show a widget in a column but dont know why its showing this error. I have comment where is the error showing .

This error simply says that you should remove the "()", because textWidgetList is not a function but a variable.

Related

Exception caught by widgets library: Incorrect use of ParentDataWidget

The same 2 errors appear in 2 different files when I run my flutter program, does anyone know how to fix this? this is my code
code for list restaurant.dart
import 'package:flutter/material.dart';
import 'package:resto_app/data/model/restaurant_list.dart';
import 'package:resto_app/ui/detail_page.dart';
class CardRestaurant extends StatelessWidget {
final Restaurant restaurant;
const CardRestaurant({Key? key, required this.restaurant}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: InkWell(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) {
return RestaurantDetailPage(idrestaurant: restaurant.id);
}));
},
child: Stack(
children: <Widget>[
Container(
margin:
const EdgeInsets.only(left: 40, top: 5, right: 20, bottom: 5),
height: 170.0,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.lime.shade100,
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: const EdgeInsets.only(
left: 200, top: 20, right: 20, bottom: 20),
child: Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
width: 120.0,
child: Expanded(child: Text(restaurant.name)),
),
_sizebox(10),
Row(
children: [
_icon(Icons.star_rate, 20, Colors.yellow),
Text(
' ${restaurant.rating}',
),
],
)
],
),
),
),
),
Positioned(
left: 20.0,
top: 15.0,
bottom: 15.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Hero(
tag: restaurant.pictureId,
child: Image.network(
"https://restaurant-api.dicoding.dev/images/small/" +
restaurant.pictureId,
width: 200,
fit: BoxFit.cover,
),
),
),
),
],
),
),
);
}
}
Widget _sizebox(double height) {
return SizedBox(
height: height,
);
}
Widget _icon(IconData icon, double size, Color color) {
return Icon(
icon,
size: size,
color: color,
);
}
and my detailrestaurant.dart code
`
`import 'package:flutter/material.dart';
import 'package:resto_app/data/model/restaurants_detail.dart';
import 'package:resto_app/common/constant.dart';
class RestaurantDetail extends StatelessWidget {
static const routeName = '/restaurant_detail';
final Restaurant restaurant;
const RestaurantDetail({Key? key, required this.restaurant})
: super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Hero(
tag: restaurant.pictureId,
child: Image.network(
"https://restaurant-api.dicoding.dev/images/medium/" +
restaurant.pictureId,
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(restaurant.name),
_sizebox(10),
Row(
children: [
_icon(Icons.location_city, 20, Colors.grey),
const SizedBox(
width: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(restaurant.city),
Text(restaurant.address),
],
)
],
),
],
),
Row(
children: [
_icon(Icons.star_rate, 20, Colors.yellow),
Text(
' ${restaurant.rating}',
),
],
)
],
),
),
_barrierContent(),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding:
const EdgeInsets.only(top: 10, right: 20, left: 20),
child: Text('Description'),
),
Container(
padding: const EdgeInsets.only(
top: 10, right: 20, left: 20, bottom: 20),
width: double.infinity,
child: Text(restaurant.description)),
],
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
child: Column(
children: [
Text('Category'),
ListBody(
children: restaurant.categories.map((food) {
return Text(
'- ${food.name}',
);
}).toList(),
),
],
),
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
child: Column(
children: [
Text('Menu Food'),
ListBody(
children: restaurant.menus.foods.map((categori) {
return Text(
'- ${categori.name}',
);
}).toList(),
),
],
),
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
child: Column(
children: [
Text('Menu Drink'),
ListBody(
children: restaurant.menus.drinks.map((drink) {
return Text('- ${drink.name}');
}).toList(),
),
],
),
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 10),
child: Column(
children: [
Text('Comment'),
ListBody(
children: restaurant.customerReviews.map((review) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Expanded(
child: Row(children: [
Container(
width: 40,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue),
child: Center(
child: Text(
review.name.characters.elementAt(0),
style: const TextStyle(
color: Colors.white, fontSize: 20),
)),
),
const SizedBox(
width: 15,
),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
review.name,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold),
),
Text(
' ${review.date}',
style: TextStyle(
fontSize: 14,
color: Colors.grey.shade500),
)
],
),
SizedBox(
width: 270,
child: Text(
review.review,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
)
],
),
)
]),
),
);
}).toList(),
),
],
),
),
_barrierContent()
],
),
],
),
),
),
);
}
}
Widget _barrierContent() {
return Container(
height: 10,
color: Colors.grey.shade200,
);
}
Widget _sizebox(double height) {
return SizedBox(
height: height,
);
}
Widget _icon(IconData icon, double size, Color color) {
return Icon(
icon,
size: size,
color: color,
);
}
`
``
error
The same 2 errors appear in 2 different files when I run my flutter program, does anyone know how to fix this?
child: Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
width: 120.0,
child: Expanded(child: Text(restaurant.name)),
),
parent of Expanded must be Stack, Column, Row but in your example it's wrong
You should use Expanded only within a Column, Row or Flex & that to its top most child only
Here you have use Expanded widget inside padding widget which is inside stack and also you can't use Expanded inside stack, so it causing this ParentDataWidget Error
code for list restaurant.dart
class CardRestaurant extends StatelessWidget {
final Restaurant restaurant;
const CardRestaurant({Key? key, required this.restaurant}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: InkWell(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) {
return RestaurantDetailPage(idrestaurant: restaurant.id);
}));
},
child: Stack( //---------------
children: <Widget>[
Container(
margin:
const EdgeInsets.only(left: 40, top: 5, right: 20, bottom: 5),
height: 170.0,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.lime.shade100,
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(//---------
padding: const EdgeInsets.only(
left: 200, top: 20, right: 20, bottom: 20),
child: Expanded(//--------- you can't use expanded inside Stack
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
width: 120.0,
child: Expanded(child: Text(restaurant.name)),
),
_sizebox(10),
and my detailrestaurant.dart code
class RestaurantDetail extends StatelessWidget {
static const routeName = '/restaurant_detail';
final Restaurant restaurant;
const RestaurantDetail({Key? key, required this.restaurant})
: super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Hero(
tag: restaurant.pictureId,
child: Image.network(
"https://restaurant-api.dicoding.dev/images/medium/" +
restaurant.pictureId,
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(restaurant.name),
_sizebox(10),
Row(
children: [
_icon(Icons.location_city, 20, Colors.grey),
const SizedBox(
width: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(restaurant.city),
Text(restaurant.address),
],
)
],
),
],
),
Row(
children: [
_icon(Icons.star_rate, 20, Colors.yellow),
Text(
' ${restaurant.rating}',
),
],
)
],
),
),
_barrierContent(),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding:
const EdgeInsets.only(top: 10, right: 20, left: 20),
child: Text('Description'),
),
Container(
padding: const EdgeInsets.only(
top: 10, right: 20, left: 20, bottom: 20),
width: double.infinity,
child: Text(restaurant.description)),
],
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
child: Column(
children: [
Text('Category'),
ListBody(
children: restaurant.categories.map((food) {
return Text(
'- ${food.name}',
);
}).toList(),
),
],
),
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
child: Column(
children: [
Text('Menu Food'),
ListBody(
children: restaurant.menus.foods.map((categori) {
return Text(
'- ${categori.name}',
);
}).toList(),
),
],
),
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
child: Column(
children: [
Text('Menu Drink'),
ListBody(
children: restaurant.menus.drinks.map((drink) {
return Text('- ${drink.name}');
}).toList(),
),
],
),
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 10),
child: Column(
children: [
Text('Comment'),
ListBody(//--- this is top most child
children: restaurant.customerReviews.map((review) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Expanded(//--------- This causing problem here, you can only use Exapnded to column top most child
child: Row(children: [
Container(
width: 40,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue),
child: Center(
child: Text(
review.name.characters.elementAt(0),
style: const TextStyle(
color: Colors.white, fontSize: 20),
)),
),
const SizedBox(
width: 15,
),
Expanded(//---- This one also causing Problem
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
review.name,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold),
),
Text(
' ${review.date}',
style: TextStyle(
fontSize: 14,
color: Colors.grey.shade500),
)
],
),
SizedBox(
width: 270,
child: Text(
review.review,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
)
],
),
)
]),
),
);
}).toList(),
),
],
),
),
_barrierContent()
],
),
],
),
),
),
);
}
}
Keep this point in mind to avoid basic error
Most common one Expanded can only use to a descendant of Column,Row & Flex
Don't use Positioned under Row or Column instead use Align
Under ListView don't use Spacer instead use SizedBox
Hope this might help you to solve your Error
Happy Learning!!!

Listview inside a row not working in Flutter

I need a listview inside a row.
class Profiles extends StatelessWidget {
const Profiles({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
SideBar(),
Expanded(
child: ListView(
children: [
Wrap(
children: [
Padding(
padding: const EdgeInsets.only(top: 40.0, left: 45),
child: Container(
width: MediaQuery.of(context).size.width / 1.75,
decoration: BoxDecoration(
border: Border.all(color: Color(0xffEBEBEB)),
color: Color(0xfffbfbfa),
),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Positioned(
right: 0,
top: 0,
child: Align(
alignment: Alignment.topRight,
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: Text(
"Edit",
),
),
),
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () {
// Get.toNamed('/events',arguments: 0);
},
child: Padding(
padding:
const EdgeInsets.only(top: 0.0),
child: SvgPicture.asset(
allowDrawingOutsideViewBox: true,
Images.avatar,
),
)),
),
SizedBox(
width: 20,
),
Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'FirstName',
textAlign: TextAlign.left,
),
SizedBox(
height: 6,
),
Text("Update your role"),
SizedBox(
height: 20,
),
Row(
children: [
Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Email',
textAlign: TextAlign.left,
),
SizedBox(
height: 10,
),
Text(
'Organization',
textAlign: TextAlign.left,
),
],
),
SizedBox(
width: 30,
),
Column(
mainAxisSize: MainAxisSize.min,
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'email',
textAlign: TextAlign.left,
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
SizedBox(
height: 10,
),
Text(
"NA",
),
],
)
],
)
],
),
],
),
],
)
],
),
),
),
],
)
],
))
],
),
);
}
}
SideBar() is a Column widget having multiple elements. Code of the sidebar is,
class SideBar extends StatefulWidget {
#override
State<SideBar> createState() => _SideBarState();
}
class _SideBarState extends State<SideBar> {
#override
Widget build(BuildContext conText) {
return Material(
elevation: 1,
child: Container(
width: 70,
color: Color(0xFAFAFB),
child: Padding(
padding: const EdgeInsets.only(top: 15.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
SvgPicture.asset(
Images.topStoriesIcon,
),
SvgPicture.asset(
Images.topStoriesIcon,
),
SvgPicture.asset(
Images.topStoriesIcon,
)
],
),
],
),
),
),
);
}
}
I got an error: Assertion failed: constraints.hasBoundedWidth is not true.
But listview is working when I wrap with Expanded widget like this,
Row(
children: [
SideBar(),
Expanded(
child: ListView(
shrinkWrap: true,
children: [
],
),
)
],
).
But at that time I got Incorrect ParentWidget error
I tried many ways but didn't get results.
The expected result is attached below,
enter image description here
You can use Positioned widget as Stack child, you dont need to have on Column
child: Stack(
children: [
Positioned( // if needed put it here
top: 0,
right: 0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align( /// not here
alignment: Alignment.topRight,
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: Text(
"Edit",
),
),
),
Row(
mainAxisSize: MainAxisSize.min,

Flutter text layout

I want to position my time text on top or bottom on the left side of the bubble chat like Line app messanger.
Here is what I have:
Currently it is positioned on the center on the left side of the bubble.
This is what I want:
And this is my code:
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(sendStatus,
style: TextStyle(
fontSize: 11
),),
Text(date,
style: TextStyle(
fontSize: 11
),)
],
),
Container(
child: Align(
alignment: Alignment.topRight,
child : Column(
children: <Widget>[
Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
child: Align(
alignment: Alignment.topRight,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.symmetric(horizontal: 12,vertical: 12,),
margin: EdgeInsets.symmetric(horizontal: 10,vertical: 2),
decoration: BoxDecoration(
color: Color(0xFF2381d0),
borderRadius: BorderRadius.circular(5),
),
child: Container(
constraints: BoxConstraints(maxWidth: 250),
child: Text(
message,
style: TextStyle(fontSize: 16,color: Colors.white),
textAlign: TextAlign.left,
maxLines: 100,
overflow: TextOverflow.ellipsis,
),
),
),
SizedBox(width: 5,),
],
),
),
),
...
],
),
],
),
),
),
],
);
Is there any solution?
Check the example below I have made some changes taking your example:
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Column(mainAxisAlignment: MainAxisAlignment.end, children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
"Brian Miller",
style: TextStyle(fontSize: 11),
),
Text(
"14/11/2021",
style: TextStyle(fontSize: 11),
)
],
),
),
Align(
alignment: Alignment.topRight,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.symmetric(
horizontal: 12,
vertical: 12,
),
margin: EdgeInsets.symmetric(
horizontal: 10, vertical: 2),
decoration: BoxDecoration(
color: Color(0xFF2381d0),
borderRadius: BorderRadius.circular(5),
),
child: Container(
constraints: BoxConstraints(maxWidth: 250),
child: Text(
"This is the message for the recasdflasndfjansdkfkadf sadfaw eroisad faoisdf weorieiving end person",
style: TextStyle(
fontSize: 16, color: Colors.white),
textAlign: TextAlign.left,
maxLines: 100,
overflow: TextOverflow.ellipsis,
),
),
),
SizedBox(
width: 5,
),
],
),
),
],
),
],
),
],
)
]),
),
),
);
}
}
This has the functionality for making the time on bottom of the left card.

Flutter layout within a card

Im trying to create the following layout within a flutter card within a list builder.. (colours are for display purpose only)
However, its ending up like :-
Ive tried multiple variations using Cross axis (Throws errors), stretch, Expanded etc, but unfortunately i'm not getting very far.
This is what i have so far :-
return Container(
child: Card(
margin: EdgeInsets.only(bottom: 20.0),
shape: ContinuousRectangleBorder(
side: BorderSide(
width: 1.0,
color: Colors.white10,
)),
elevation: 1.0,
child: InkWell(
onTap: () => print("ciao"),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch, // add this
children: [
Image.memory(base64Decode(data[index].thumb_image),
// width: 300,
height: 150,
fit: BoxFit.fill),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
color: Colors.red,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Title',
textAlign: TextAlign.left,
),
Text('Description'),
],
),
),
),
Expanded(
child: Container(
color: Colors.blue,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text('12hs 8mins'),
],
),
))
],
),
Text('1000')
],
),
),
),
);
Adding a container that encapsulates your red and blue widgets helps the case. I added a height of 50 on the container that encapsulates the widgets.
void main() {
runApp(
MaterialApp(
home: MyWidget(),
),
);
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Card(
margin: EdgeInsets.only(bottom: 20.0),
shape: ContinuousRectangleBorder(
side: BorderSide(
width: 1.0,
color: Colors.white10,
)),
elevation: 1.0,
child: InkWell(
onTap: () => print("ciao"),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch, // add this
children: [
Expanded(
child: Container(
color: Colors.green,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Title',
textAlign: TextAlign.left,
),
Text('Description'),
],
),
),
),
Container(
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
color: Colors.red,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Title',
textAlign: TextAlign.left,
),
Text('Description'),
],
),
),
),
Expanded(
child: Container(
// MediaQuery.of(context).size.width
color: Colors.blue,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text('12hs 8mins'),
],
),
))
],
),),
Text('1000')
],
),
),
),
),
);
}
}
Here's a solution with as much flexibility that I could think of:
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
children: [
Expanded(
child: Container(
color: Colors.green,
alignment: Alignment.center,
child: Text('Top'),
),
),
Container(
height: 100,
child: Row(
children: [
Flexible(
flex: 3,
child: Container(
color: Colors.blue,
alignment: Alignment.center,
child: Text('Bottom Left'),
)
),
Flexible(
flex: 1,
child: Container(
color: Colors.orange,
alignment: Alignment.center,
child: Text('Bottom Right'),
),
),
],
),
)
],
);
}
}
Which will look like this:

[flutter]Why my column alignment is always center?

I declared two columns in a row to layout the text and the icon.
The column for the icon is always center even if I set the mainAxisAlignment with MainAxisAlignment.start.
Here is the code for the card:
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:life_logger/models.dart';
import 'package:life_logger/screens/entry_editor_screen.dart';
import 'package:life_logger/widgets/dot.dart';
Wrap buildActivities(Entry entry) {
var children = <Widget>[];
var idx = 0;
entry.activities.forEach((activity) {
var element = Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
Icon(
activity.iconData,
color: entry.mood.color,
),
SizedBox(
width: 3,
),
Text(
'${activity.description}',
style: TextStyle(color: Colors.grey),
),
]);
children.add(element);
if (idx < entry.activities.length - 1) {
children.add(Dot());
}
idx++;
});
return Wrap(
children: children,
spacing: 5,
crossAxisAlignment: WrapCrossAlignment.center,
);
}
Widget buildEntryRow(Entry entry, BuildContext context) {
var entryRow = GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => EntryEditorScreen(entry)),
);
},
child: Row(
children: <Widget>[
// the column for the icon
Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 8.0, right: 8.0),
child: Icon(
entry.mood.iconData,
color: entry.mood.color,
size: 48,
),
),
],
),
Expanded(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Baseline(
baseline: 30.0,
baselineType: TextBaseline.alphabetic,
child: Text(
entry.mood.description,
style: TextStyle(
color: entry.mood.color,
fontSize: 24,
),
),
),
Baseline(
baseline: 30.0,
baselineType: TextBaseline.alphabetic,
child: Text(
DateFormat.Hm().format(entry.createdAt),
style: TextStyle(
color: Colors.grey,
fontSize: 16,
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(child: buildActivities(entry)),
],
),
Row(
children: <Widget>[
Text(
entry.note,
style: TextStyle(
color: Colors.grey,
fontSize: 16,
),
),
],
),
],
),
),
],
));
return entryRow;
}
class EntryCard extends StatefulWidget {
final List<Entry> entries;
EntryCard(this.entries);
#override
_EntryCardState createState() => _EntryCardState();
}
class _EntryCardState extends State<EntryCard> {
#override
Widget build(BuildContext context) {
var dateRow = Container(
height: 30,
decoration: BoxDecoration(
color: widget.entries[0].mood.color.withOpacity(0.5),
borderRadius: BorderRadius.all(Radius.circular(4.0)),
),
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 24.5, right: 24.5),
child: Ring(
size: 5.0,
color: widget.entries[0].mood.color,
),
),
Text(
DateFormat('EEEEE, M月d日').format(widget.entries[0].createdAt),
style: TextStyle(
color: widget.entries[0].mood.color,
fontSize: 14,
),
)
],
));
return Card(
child: Column(
children: <Widget>[dateRow] +
widget.entries.map((entry) => buildEntryRow(entry, context)).toList(),
));
}
}
The actual layout as follow:
Use crossAxisAlignment: CrossAxisAlignment.start
And for future, I would suggest you to add code that is independent of other code so that others can run it and see.
like that for one widget
Container(
child: Align(
alignment: Alignment.centerRight,
child: Text(S.current.forgetPassword),
),
),
or for all
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
If you want you can adjust column according to you .
Here is code of how to call widgets of columns at start.
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
Use it :
Column(
children: const <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text('Text 1')
),
Align(
alignment: Alignment.centerLeft,
child: Text('Text 2')
),
],
)
Setting the height of the Container worked for me:
height: double.infinity,