I have 3 ListTile widgets as shown below and I want to add vertical connection lines between icons but not sure how to do that. Can anyone help please? Thanks.
[Icon] Order received
| 2020-05-28 10:00 AM
|
|
[Icon] On the way
| 2020-05-29 10:00 AM
|
|
[Icon] Delivered
2020--05-29 11:00 AM
Edit: source code is provided below. As described above I need to draw a line between icons of the ListTile widgets. Tried VerticalDivider but there is still a big gap between ListTile widgets.
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:home_chefs/common_widgets/text_widget.dart';
import 'package:home_chefs/constants/color_palette.dart';
import 'package:home_chefs/constants/font_enum.dart';
import 'package:home_chefs/constants/form_styleguides.dart';
class OrderStatusWidget extends StatefulWidget {
#override
_OrderStatusWidgetState createState() => _OrderStatusWidgetState();
}
class _OrderStatusWidgetState extends State<OrderStatusWidget> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: ColorPalette.white,
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 30.0, bottom: 30.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
TextWidget(
text: 'Order status',
fontFamily: FontFamily.BalooRegular.toShortString(),
fontSize: FormStyleGuides.textSizeMedium,
),
TextWidget(
text: 'Invoice: 12828',
fontFamily: FontFamily.BalooRegular.toShortString(),
fontSize: FormStyleGuides.textSizeMedium,
),
Container(
height: 100.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
image: DecorationImage(
fit: BoxFit.contain,
image: AssetImage(
'assets/images/trending/pho_ha_noi.jpg',
))))
],
),
),
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ListTile(
leading: FaIcon(
FontAwesomeIcons.book,
color: ColorPalette.persimmon,
),
title: Text('Order received'),
subtitle: Text('30/05/2020 10.00 AM'),
//contentPadding: EdgeInsets.only(left: 20.0, bottom: 30.0),
),
ListTile(
leading: FaIcon(
FontAwesomeIcons.truck,
color: ColorPalette.persimmon,
),
title: Text('On the way'),
subtitle: Text('30/05/2020 10.00 AM'),
//contentPadding: EdgeInsets.only(left: 20.0, bottom: 30.0),
),
ListTile(
leading: FaIcon(
FontAwesomeIcons.solidFlag,
color: ColorPalette.persimmon,
),
title: Text('Delivered'),
subtitle: Text('30/05/2020 11.00 AM'),
//contentPadding: EdgeInsets.only(left: 20.0, bottom: 30.0),
),
],
),
),
Container(
width: 100.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
FormStyleGuides.buttonBorderRadius),
side: BorderSide(color: ColorPalette.persimmon)),
color: ColorPalette.persimmon,
highlightColor: ColorPalette.persimmon,
onPressed: () {},
padding: EdgeInsets.fromLTRB(
FormStyleGuides.buttonPaddingLeft,
FormStyleGuides.buttonPaddingTop,
FormStyleGuides.buttonPaddingRight,
FormStyleGuides.buttonPaddingBottom),
child: TextWidget(
text: 'Confirm delivery',
color: ColorPalette.white,
fontSize: FormStyleGuides.textFormFieldLabelSize,
),
),
],
),
)
],
),
);
}
}
If I understood your question correctly, you are looking for something like this:
class IconLines62088774 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
ItemContainer(),
ItemContainer(),
ItemContainer(),
],
);
}
}
class ItemContainer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.blue,
height: 20,
width: 1,
),
Icon(Icons.message, color: Colors.grey,),
Container(
color: Colors.blue,
height: 20,
width: 1,
),
],
),
Expanded(
child: Padding(
padding: EdgeInsets.all(8),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('On the way'),
Text('01-07-2020'),
],
),
),
),
],
),
);
}
}
Related
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.
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:
I am trying to use the showBottomModalPopup but I can't seem to get it extended more than 50 % of the screen even tho I am using the the context of the screen to set the height.
Can anyone please spot what I am doing wrong
I am trying to set it to 80%
This the showBottomModal function
void _tripShowModalBottomSheet(context) {
showModalBottomSheet(context: context, builder: (BuildContext bc) {
return Container(
height: MediaQuery.of(context).size.height * .80,
color: Colors.white,
child: Text('this is your first showBottomModal')
);
});
}
I am calling it from here
onLongPress: () => {
_tripShowModalBottomSheet(context)
},
full code if needed
import 'package:flutter/material.dart';
class TransportMenuBody extends StatelessWidget {
const TransportMenuBody({Key key}) : super(key: key);
void _tripShowModalBottomSheet(context) {
showModalBottomSheet(context: context, builder: (BuildContext bc) {
return Container(
height: MediaQuery.of(context).size.height * 30,
color: Colors.white,
child: Text('this is your first showBottomModal')
);
});
}
#override
Widget build(BuildContext context) {
return
ListView(children: <Widget>[
Container(
padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
alignment: Alignment.topLeft,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.only(bottom: 10.0),
child: Text('Kigali', style: TextStyle(fontSize: 20, fontWeight: FontWeight.w400, color: Colors.black),),
),
InkWell(
onLongPress: () => {
_tripShowModalBottomSheet(context) // calling the function from here
},
onTap: () => {},
child: Container(
color: Colors.white,
width: MediaQuery.of(context).size.width * 1,
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
child: Container(
child: Container(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(child: Text('201', style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.w600))),
Container(
alignment: Alignment.topLeft,
child: Text('20 active buses', style: TextStyle(color: Color(0xFFd9d9d9)),),),
],),
Row(
children: <Widget>[
Container(
alignment: Alignment.topLeft,
child: Text('Kicukiro(saint-joseph) - Down town'),),
],),
const Divider(
color: Color(0xFFD9D9D9),
thickness: .5,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(child: Text('201', style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.w600))),
Container(
alignment: Alignment.topLeft,
child: Text('20 active buses', style: TextStyle(color: Color(0xFFd9d9d9)),),),
],),
Row(
children: <Widget>[
Container(
alignment: Alignment.topLeft,
child: Text('Kicukiro(saint-joseph) - Down town'),),
],),
const Divider(
color: Color(0xFFD9D9D9),
thickness: .5,
),
],)
)
)
),
),
],
)
),
Text('data'),
],
);
}
}
Well I am not sure if bottomSheetModal can gain height but if you want a bottom sheet with rich customization you can also use DraggableScrollableSheet which is scrollable by default with nice animation DraggableScrollableSheet you can check this here https://api.flutter.dev/flutter/widgets/DraggableScrollableSheet-class.html
Using a Column in a Row which is a child of a Card widget, how do I set the Column width as large as the row widget?
return Card(
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(4.0),
child: Container(
width: 100.0,
height: 100.0,
// container for image
color: Colors.grey,
),
),
Column(
//crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Item Name',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
Text(
'Previous Price',
style: TextStyle(fontSize: 15.0, color: Colors.grey),
),
Row(
children: <Widget>[
RaisedButton(
textColor: Colors.white,
child: Text('Add'),
),
Icon(Icons.add),
Container(
width: 50.0,
height: 50.0,
child: Text('12'),
color: Colors.red[200],
),
Icon(Icons.remove),
],
),
],
),
],
),
)
import 'package:flutter/material.dart';
main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Container(
child: Card(
child: Row(
children: [
Padding(
padding: const EdgeInsets.all(4.0),
child: Container(
width: 100.0, height: 100.0,
// container for image
color: Colors.grey,
),
),
Container(
color: Colors.red,
child: Column(
mainAxisSize: MainAxisSize.min,
//crossAxisAlignment: CrossAxisAlignment.stretch,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Item Name',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
Text(
'Previous Price',
style: TextStyle(fontSize: 15.0, color: Colors.grey),
),
Container(
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
RaisedButton(
textColor: Colors.white,
child: Text('Add'),
onPressed: () {},
),
Icon(Icons.add),
Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
width: 50.0,
height: 50.0,
child: Center(child: Text('12')),
color: Colors.red[200],
),
),
Icon(Icons.remove),
],
),
),
],
),
),
],
),
),
),
)));
}
}
let me know if this works maybe I am correct, but still, the description is about confusing. looking at your code I made the prediction.
Thanks.
I'm a little confused by your description,
but crossAxisAlignment: CrossAxisAlignment.stretch might be the answer to the title.
Try using,
Expanded(
child:Container(
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
RaisedButton(
textColor: Colors.white,
child: Text('Add'),
onPressed: () {},
),
Icon(Icons.add),
Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
width: 50.0,
height: 50.0,
child: Center(child: Text('12')),
color: Colors.red[200],
),
),
Icon(Icons.remove),
],
),
),
)
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,