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
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
this is my code:
#override
Widget build(BuildContext context) {
return ListView(children: [
Card(
child: Row(
children: [
ListTile(
title: Text(publicacion.title),
subtitle: Text(publicacion.body),
)
],
)),
]);
}
Surely it is some overflow, but I couldn't fix it, I can't find the way .. I tried to implement ListView.builder, but I wouldn't be knowing where to fit it
Try to add your Inside Row widgets wrap it with Expanded or Flexible refer my answer here or here or here hope its helpful to you
Refer Expanded here
Try below code hope its helpful to you.
ListView(
shrinkWrap: true,
children: [
Card(
child: Row(
children: [
Expanded(
child: ListTile(
title: Text(
'publicacion.titlepublicacion.titlepublicacion.titlepublicacion.titlepublicacion.titlepublicacion.title'),
subtitle: Text(
'publicacion.bodypublicacion.titlepublicacion.titlepublicacion.titlepublicacion.titlepublicacion.titlepublicacion.title'),
),
)
],
),
),
],
),
Your Result Screen->
The Row widget is creating this problem, just remove Row Widget and it should work fine.
#override
Widget build(BuildContext context) {
return ListView(children: [
Card(
child: ListTile(
title: Text(publicacion.title),
subtitle: Text(publicacion.body),
)),
]);
}
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'),
]
),
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(),
),
);