How can I center a content container in Flutter like a "max-width" container in CSS?

Question

How would one make a centered content container like this in Flutter?:

.container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 600px;
    background-color: red;
    height: 100vh;
}

<div class="container">
    Hello inside container
</div>

I have tried this, but it just overflows instead of fitting to the width of the screen once the application is smaller than the maxWidth.

import "package:flutter/material.dart";

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Theme.of(context).colorScheme.background,
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: double.infinity,
              color: Colors.red,
              constraints: const BoxConstraints(maxWidth: 800),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  Text(
                    "Hello inside container",
                    style: TextStyle(fontSize: 40),
                  ),
                ],
              ),
            ),
          ],
        ));
  }
}

score 0 · Answer 1 · answered May 27 '22 at 12:59

0

You can use MediaQuery.of(context).size.width as width. It gives you the full width of screen. Also Limit max width of Container in Flutter have a look at this.

answered May 27 '22 at 12:59

aoiTenshi

547
1
6
20

score 0 · Accepted Answer · answered May 27 '22 at 13:05

Try below code wrap your Column inside Expanded or Flexible

 Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Expanded(
        child: Container(
          width: double.infinity,
          color: Colors.red,
          constraints: const BoxConstraints(maxWidth: 800),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Text(
                "Hello inside container",
                style: TextStyle(fontSize: 40),
              ),
            ],
          ),
        ),
      ),
    ],
  ),

Didn't work with `Expanded`, but it worked with `Flexible`. – Robiot May 27 '22 at 13:50 — Robiot, May 27 '22 at 13:50

How can I center a content container in Flutter like a "max-width" container in CSS?

How would one make a centered content container like this in Flutter?:

2 Answers2