creativecreatorormaybenot
creativecreatorormaybenot

Reputation: 126964

Cannot center Text widget inside a Column

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.

illustration

As you can see the text in the upper image is not centered.

Upvotes: 1

Views: 2917

Answers (2)

kevinbrink
kevinbrink

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

Arnold Parge
Arnold Parge

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

Related Questions