I am working on a flutter app and I need to make a part of the code scrollable. The full code:
return Scaffold(
appBar: AppBar(
title: Text(_title),
),
body: Column(
children: [
Padding(
padding: EdgeInsets.only(bottom: 30),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
...
],
),
for (var day in data)
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
day.getDate(),
style: getDataLabelStyle(),
),
Text(
day.getStarting(),
style: getDataLabelStyle(),
),
Text(
day.getEnding(),
style: getDataLabelStyle(),
),
],
),
],
),
);
And this part should be scrollable:
for (var day in data)
Row(
...
],
),
Also you can see what part should be scrollable:
Thanks in advance
Use ColumnBuilder and then Wrap it with singleChildScrollView like this:
Expanded(
child: SingleChildScrollView(
child: Column(children: List.generate(data.lenght, (index){
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
day.getDate(),
style: getDataLabelStyle(),
),
Text(
day.getStarting(),
style: getDataLabelStyle(),
),
Text(
day.getEnding(),
style: getDataLabelStyle(),
),
],
);
}),),
),
)
You can achieve your task using the SingleChildScrollView Class.
For your given code you can achieve this by wrapping your row into Column and again wrap it with SingleChileScrollView.
The full solution is:
....
SingleChildScrollView(
child: Column(
children: [
for (var day in data)
Row(
children: [
.......
],
),
],
),
),
Wrap the part with SingleChildScrollView. and if you are using SingleChildScrollView inside a Column, do not forget to wrap that with Expanded.
example,
Expanded(
child: SingleChildScrollView(
child: Container(
child: yourCustomWidget()
),
),
),
Related
I'm trying to make a menu for a reastaurant like this one : -
I'm using Flutter and this is my code:
return Column(
mainAxisSize: MainAxisSize.min,
children: [
ListTile(
title: Row(
children: [
Expanded(child: Text( text, style: style, )),
const SizedBox( width: 15 ),
Text( '\$ $price', style: style,),
],
),
),
Divider( color: Colors.white.withOpacity( 0.5 ),),
],
);
But this is the result that I'm getting : -
Please, any help will be welcome.
And thanks in advance.
The result that you want to achieve can be done just by using the row widget, you don't have to wrap it up with ListTile. I am writing the code snippet of Row widget for you. You can copy paste it and it will work. Additionally I see that you are generating it in the column widget. If you have a dynamic array then I suggest that you use ListView Divider instead. It will have a divider to add between your rows as well. You can find more about it on flutter official documentation.
Row(
children:[
//You may add some padding to Text for better looking UI.
Text("Chicken Masala"),
Expanded(child:Divider()),
Text("180")
])
Just replace your column's children with this row and you will be able to see it.
I solved your issue like this:
Output of your issue : -
body: Column(
mainAxisSize: MainAxisSize.min,
children: [
ListTile(
title: Row(
children: [
const Text(
'Cheese Burger',
),
Expanded(child: Text('.' * 100, maxLines: 1)),
const Text(
'\$ 10',
),
],
),
),
const SizedBox(
height: 10,
),
ListTile(
title: Row(
children: [
const Text(
'Chicken Masala Soup',
),
Expanded(child: Text('.' * 100, maxLines: 1)),
const Text(
'\$ 10',
),
],
),
),
],
),
#Ramji, #Dhruvil Patel, I try your code and it work fine, but it was making an overflow when the text was long, so I made some changes in your example and I got what I was looking for.
Thanks a lot for you help.
Here is what I dit.
return SizedBox(
width: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
Expanded( child: Text( text, style: style, maxLines: 2, overflow: TextOverflow.ellipsis, ) ),
],),
Row(
children: [
Expanded(
child: Text(
'.' * 150,
style: style,
maxLines: 1,
overflow: TextOverflow.fade,)),
SizedBox(
width: 80,
child: Text(
'\$ $price',
style: style,
textAlign: TextAlign.right,)),
],
),
// Divider( color: Colors.white.withOpacity( 0.5 ),),
],
),
);
Hi community, as you can see I would like to align text based on this red line, so if there is more text, they should go up, now i tried `textAlign: TextAlign.end // no align bottom? , but it seems not work for my case, plz help,Thank you!
return MaterialApp(
home:
Column(
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: const [
Text('asd asdk\n alksd\n alksd '),
Divider(
color: Colors.red,
)
],
),
),
const Expanded(child: SizedBox())
],
),
);
try this code:
Column(
children: [
Flexible(
child: SizedBox(height: MediaQuery.of(context).size.height,),
),
Text(...);
],
);
I am following the example of this tutorial.
If I want to add two text components to a children array and I get the title warning.
For example:
Widget titleSection = Container(
child: Row(
//need to expand the rows on the column
children: [
Expanded(
child: Column(
children: [
const Text(
'Hello1',
),
const Text(
'Hello2',
),
],
)
],
),
);
What am I doing wrong?
In your case it should be
Widget titleSection = Container(
child: Row(
//need to expand the rows on the column
children: [
Expanded(
child: Column(
children: const [
Text(
'Hello1',
),
Text(
'Hello2',
),
],
),
)
],
),
);
I want to move widgets to the new line automatically if it's overflow and Wrap widget is a good way for this.
so I have some wrap widgets which have width based on text length and some icons like:
Current actual:
I want to align 2 icons on the left and right side of the parent.
but as you can see the red-colored area of Row, I don't know how to make Row width match to the parent when Text widget has longer than Row (in the above case of the attached image, something?)
This is what I expect:
and my current code is:
Wrap(
direction: Axis.horizontal,
crossAxisAlignment: WrapCrossAlignment.start,
children: [
Container(
child: Column(
children: [
Text(
"hoge",
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.edit),
Icon(Icons.more_vert),
],
)
],
),
),
Container(
child: Column(
children: [
Text(
"too long text...............",
),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(Icons.edit),
Icon(Icons.more_vert),
],
)
],
),
),
Container(
child: Column(
children: [
Text(
"hoge",
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.edit),
Icon(Icons.more_vert),
],
)
],
),
),
],
),
How to achieve this?
IntrinsicWidth(
child: Column(
children: [
Text(
"too long text...............",
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(Icons.edit),
Icon(Icons.more_vert),
],
)
],
),
),
Wrap your long text Column with IntrinsicWidth instead of normal Container Widget.moreover, remove the mainAxisSize constraint on the Row widget to make it's width same as Text widget.
https://api.flutter.dev/flutter/widgets/IntrinsicWidth-class.html
I think this is what you're looking for List of Containers side by side
I made it dynamic so that you can add new items if you want base on the list of Item.
class Item {
String text;
IconData icon1;
IconData icon2;
Color color;
Item({ this.text, this.icon1, this.icon2,this.color,});
}
We can make this dynamic by creating a List of Item
final List<Item> item = [
Item(
text: 'Item 3',
icon1: Icons.edit,
icon2: Icons.more_vert,
color: Colors.blue,
),
Item(
text: 'Item 2 This text is too long for the screen width..... screen width.....screen width.....screen width.....',
icon1: Icons.edit,
icon2: Icons.more_vert,
color: Colors.greenAccent,
),
Item(
text: 'Item 3',
icon1: Icons.edit,
icon2: Icons.more_vert,
color: Colors.amberAccent[100],
),
];
You might also want to look at Wrap Class
Wrap(
spacing: 8.0, // gap between adjacent chips
runSpacing: 4.0, // gap between lines
children: item.map((Item) {
return GestureDetector(
child: Container(
decoration: BoxDecoration(
color: Item.color,
),
margin: const EdgeInsets.all(15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(Item.text),
Wrap(
children: <Widget>[
Icon(Item.icon1),
Icon(Item.icon2),
],
)
],
),
),
onTap: () => {},
);
}).toList(),
),
I'm using TextAlign to centre one piece of text and then again to send another piece of text to the right, all contained in a Row, but the alignment does nothing at all.
Scaffold(
body: Row(
children: <Widget>[
Text('Align Centre', textAlign: TextAlign.center),
Text('Align Right', textAlign: TextAlign.right),
],
),
);
You can see here it's ignored completely:
It sounds like you are after something like this:
return Scaffold(
body: Center(
child: Row(
children: <Widget>[
SizedBox(width: MediaQuery.of(context).size.width / 3.3333333,),
Expanded(child: Text('Align Centre adding more text heree....', textAlign: TextAlign.center)),
Expanded(child: Text('Align Right', textAlign: TextAlign.right)),
],
),
),
);
By adding an empty container first into the row it pushed the Align Center text into the middle.
Edit: Instead of using an expanded widget used a sized box instead and fix the width to consume a 3rd of the view.
Wrap Text with Expanded widget:
Scaffold(
body: Row(
children: <Widget>[
Expanded(child: Text('Align Centre', textAlign: TextAlign.center)),
Expanded(child: Text('Align Right', textAlign: TextAlign.right)),
],
),
);
By default Text takes up space only required for content.
Or what you probably want:
Scaffold(
body: Stack(
children: <Widget>[
Positioned.fill(
child: Text('Align Centre', textAlign: TextAlign.center)),
Positioned.fill(
child: Text('Align Right', textAlign: TextAlign.right)),
],
),
);
Scaffold(
body: Row(
children: <Widget>[
Container(
width:screen_width/2,
alignment: Alignment.center,
child: Text('Align Centre',),
),
Container(
width:screen_width/2,
alignment: Alignment.centerRight,
child: Text('Align right',),
),
],
),
);
and you can get screen_widht by
double screen_width = MediaQuery.of(context).size.width;