How can I create a centered content box like this in Flutter?:
.content-box {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 600px;
background-color: blue;
height: 100vh;
}<div class="content-box">
Content inside the box
</div>I attempted to achieve this, but the content overflows instead of adjusting to the screen width when the app is resized below 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.blue,
constraints: const BoxConstraints(maxWidth: 800),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
"Content inside the box",
style: TextStyle(fontSize: 40),
),
],
),
),
],
));
}
}