How do I include a text under the refreshindicator?
Widget build(BuildContext context) {
return new Scaffold(
body: ModalProgressHUD(child: page(context), inAsyncCall: _loading, progressIndicator: RefreshProgressIndicator(), color: Colors.black),
);
}
You have to wrap the ModalProgressHUD in a column with children and then you can add a Text() child after the ModalProgressHUD and inside that column:
body: Column(
children: <Widget>[
ModalProgressHUD(),
Text('your text'),
]
),
Related
#override
Widget build(BuildContext context) {
new Scaffold(
appBar: new AppBar(title: new Text("Demo Project")),
body: new Padding(
padding: new EdgeInsets.all(10.0),
child: new Column(
children: <Widget>[
new ListView(children: getDemolist()),
new ListView(children: getDemolisttwo())
],
),
),
);
}
All two list view will display in same area in responsive way.
Use Flexible and you can change flex property in it, just like Expanded.
Column(
children: <Widget>[
Flexible(child: getDemolist()),
Flexible(child: getDemolisttwo()),
],
)
So i have created a costume widget and i wanted to show it in a column, but whenever i put it in a column and run the application the widget doesn't show on the screen.
This is my costume Widget
#override
Widget build(BuildContext context) {
return new FractionallySizedBox(
widthFactor: 1,
heightFactor: 0.3,
child: Container(
child: new LineChart(linechartData()),
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
),
);
}
and this is my main.dart widget
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: new Text("hello"),
),
body: new Container(
child: new Column(
children: [
new Container(child: new Text("hello")),
new Chart()],
)),
),
);
}
}
Ive tried to check if the problem is with the column widget by removing my costume widget from the column widget and by putting a text widget but the text widget shows fine the problem is when i add my costume widget inside it that everything desapears
You need to wrap your widget inside the Flexible one, like this:
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: new Text("hello"),
),
body: new Container(
child: new Column(
children: [
new Flexible(child: Costume()),
new Chart()],
)),
),
);
}
}
CHeckout FractionallySizedBox (Flutter Widget of the Week) video
You can wrap the FractionallySizedBox with Expanded to get available height and then heightFactor will be used its child
body: Container(
child: Column(
children: [
Container(
child: new Text("hello"),
),
Expanded(
child: FractionallySizedBox(
widthFactor: 1,
heightFactor: 0.3,
child: Container(
),
),
)
],
),
),
Also you might be interested on LayoutBuilder
I wanted to show text from a string variable before the Wrap widget. But when I wanted to add something like Text before Wrap widget it is giving me error. How can show some text before the Wrap widget.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Second Route"),
),
body: Center(
child:
Wrap(
children: _buildButtonsWithNames(),
),
)
);
}
You can give column as a child to the center widget like this:
body: Center(
child: Column(
children: [
Text("Your Text"),
Wrap(
children: _buildButtonsWithNames(),
),
],
),
),
Hope it answers the question.
If you want the text to be on top of the Wrap, add your Wrap to a Column and before of it add your Text widget.
If you want the text to be just before the Wrap, add your Wrap to a Row widget and do the same as for Column.
Just found a way right now!!! from another answer.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Second Route"),
),
body: Column(
children: <Widget>[
Text("He"),
Expanded(
child: Center(
child: Wrap(
children: _buildButtonsWithNames(),
),
),
)
],
),
);
}
}
Just use the column widget and pass the text and wrap widgets as children of the column
I'm new to Flutter/Dart, so maybe the problem I'have is just lack of knowledge. My goal is to build a card with an horizontal header on top of the card and then the card should display a list of item/value pairs vertically, wrapping them to a new column if the device is large enough. I've added a Column, for two children (the header and the Wrap), but if it's embedded in a column there's no wrapping at all.
I tried a lot of combinations but I didn't find a solution. If I remove the column, the Wrap widget works perfectly.
class TestApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return
MaterialApp(
title: 'Wrap Test',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: TestScreen(),
);
}
}
class TestScreen extends StatelessWidget {
/*
Builds a single item/value pair
*/
Widget _text(int i) {
var container = Container(
height: 50,
child: Row(
children: <Widget>[
Container(
width: 200,
child: Text(
'item $i',
),
),
Text(
'value $i',
),
],
),
);
return container;
}
/*
Builds a list of item/value pairs
*/
List<Widget> _items(int n) {
List<Widget> widgetList = [];
for (int i = 1; i <= n; i++) {
widgetList.add(_text(i));
}
return widgetList;
}
/*
This way Wrap widget isn't working as I thought...the reason is that it seems bounded by
the column and the column does not expands itself due to wrapping
*/
Widget buildWrapNotWorking(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Wrap Test"),
),
body: Card(
color: Colors.yellow,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Header",
),
Wrap(
direction: Axis.vertical,
runSpacing: 50,
crossAxisAlignment: WrapCrossAlignment.start,
spacing: 20,
children: _items(20),
),
],
),
),
);
}
/*
This way Wrap widget is working, because I removed the column. But I need to have a card header
on top of the card.
*/
Widget buildWrapWorkingButNoHeader(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Wrap Test"),
),
body: Card(
color: Colors.yellow,
child: Wrap(
direction: Axis.vertical,
runSpacing: 100,
crossAxisAlignment: WrapCrossAlignment.start,
spacing: 20,
children: _items(20),
),
),
);
}
#override
Widget build(BuildContext context) {
return buildWrapNotWorking(context);
// return buildWrapWorkingButNoHeader(context);
}
}
I'm expecting that calling buildWrapNotWorking(context) will work as desired.
The problem is similar to that one:
How to wrap row items in a card with flutter
Simply wrap you Wrap widget with - Expanded - this was it will get enough space in column.
code:
Widget buildWrapNotWorking(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Wrap Test"),
),
body: Card(
color: Colors.yellow,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Header",
),
Expanded(
child: Wrap(
direction: Axis.vertical,
runSpacing: 50,
crossAxisAlignment: WrapCrossAlignment.start,
spacing: 20,
children: _items(20),
),
),
],
),
),
);
}
I have code like this but I want it to iterate over an integer array to display a dynamic amount of children:
return Container(
child: Column(
children: <Widget>[
Center(
child: Text(text[0].toString(),
textAlign: TextAlign.center),
),
Center(
child: Text(text[1].toString(),
textAlign: TextAlign.center),
),
],
),
)
Where the text variable is a list of integers converter to string here. I tried adding a function to iterate through the array and display the 'children' but was getting a type error. Not sure how to do it since I'm new to Dart and Flutter.
You can try this :
#override
Widget build(BuildContext context) {
List<int> text = [1,2,3,4];
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
child: Column(
children: [
for ( var i in text ) Text(i.toString())
],
),
),
);
Note that this was added with the updated of dart to version 2.3. You can read about some of the best changes in this article
Another method that was provided before dart 2.3 is this:
#override
Widget build(BuildContext context) {
List<int> text = [1,2,3,4];
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
child: Column(
children: List.generate(text.length,(index){
return Text(text[index].toString());
}),
),
),
);
You can try .map Method here,
class Example extends StatelessWidget {
List <int> exampleList = [1,2,3,4];
#override
Widget build(BuildContext context) {
return
Container(
child: Column(
children: exampleList.map((i) => new Text(i.toString())).toList()
),
);
}
}
This method will come in handy if you have objects inside your list. Also with the .map() method .toList() must be used at the end.
Assuming you want to loop some widgets (e.g Text()) in the Column widget, you can add a loop inside the children property. See a sample below:
Column(
children: <Widget>[
for (int i=0; i<3; i++)
Text("Hello" + i)
],
)
You could use the map method of your list of Strings.
Widget _getListWidgets(List<String> yourList){
return Row(children: yourList.map((i) => Text(i)).toList());
}
When your List have a complex Object:
Widget _getListWidgets( List<YourObject> lstItens) {
return Row(children: lstItens.map((i) => Text(i.name)).toList());
}
The best way to do this is to make use of the List.map()
That way you do not have to enable 'control-flow-collections'
Container(
child: Column(
children: myList.map((e) => new Text(e)).toList(),
),
);