Reputation: 126964
In my MaterialApp
I have a Column
inside a horizontal ListView
.
Inside that Column
is a Text
widget.
ListView(
children: [
Column(
children: [
Text('this is the text widget'),
// here I have another widget placed, just imagine a rectangle
],
],)
textAlign: TextAlign.center,
nor surrounding it with a Center
will change the position of the Text
. The Text
will always stay in the top left corner.
Also, I saw a lot about axis alignments in answers regarding similar problems, but I tried every axis settings I saw without success.
As you can see the text in the upper image is not centered.
Upvotes: 1
Views: 2917
Reputation: 1309
return new ListView(children: [
new Center(
child: Column(
children: [
Text('this is the text widget'),
// here I have another widget placed, just imagine a rectangle
],
),
)
]);
warp with new Center Widget
Upvotes: 1
Reputation: 6867
You need crossAxisAlignment: CrossAxisAlignment.center
ListView(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('this is the text widget'),
// here I have another widget placed, just imagine a rectangle
],
),
],
)
EDIT:
Since, you are unsatisfied with above answer. I re-did what you exactly want. Please refer below code:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'MediaQuery Demo',
theme: new ThemeData(
primarySwatch: Colors.red,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
Widget widgetToRepeat() {
return new Column(
children: <Widget>[
new Text('Hello'),
new Container(
width: 100.0,
height: 150.0,
color: Colors.green,
margin: new EdgeInsets.all(8.0),
)
],
);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Demo'),
),
body: new Column(
children: <Widget>[
new Container(
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
widgetToRepeat(),
widgetToRepeat(),
widgetToRepeat(),
widgetToRepeat(),
widgetToRepeat(),
],
),
height: 150.0 + 16.0 + 20.0 + 16.0,
padding: new EdgeInsets.all(10.0),
)
],
),
);
}
}
I hope this helps. I am able to achieve text at horizontally center.
Upvotes: 3