Flutter Question posted in
The official Flutter documentation can be found here.

Flutter align column center

I need to achieve the following:

  1. Column width fit the content (no wrap if possible)
  2. Column is aligned to the center of screen
  3. Column’s contents are aligned to the left of the Column box

enter image description here

Tags:

2

Answers


  1. 0

    You can wrap the Column with Center widget and CrossAxisAlignment to start with MainAxisSize to min.

    Example:

    @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text('This is line one'),
            Text('This is line two'),
            Text('This is line three'),
            Text('This is line four'),
            Text('This is line five'),
          ],
        ),
      ),
    );
  }

    Output:

    enter image description here

    Login or Signup to reply.
  2. 0 
    return Scaffold(
      body: Center(
        child: Container(
          color: Colors.grey.shade400,
          padding: const EdgeInsets.all(15.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              Text("Hi there"),
              CircleAvatar(),
              Text("this is a long text"),
              CircularProgressIndicator(),
              Text("vroom x2"),
              SizedBox(
                  width:100,
                  child: LinearProgressIndicator()
              ),
            ],
          ),
        ),
      ),
    );

    pic

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search