Skip to main content

Flutter Add Container Inside Container

Recently when I am putting Container inside container widget than even I am giving child container width height fixed and smaller then the parent. But child container is expanding itself over the parent. This is not its actual behavior. So after looking int container widget documentation I found that we have pass Child container alignment, In order to do not expand child over parent container.

Flutter Add Container Inside Container

1. We have to use alignment property of Container, So the child container will not expand itself.
Container(
        width: 300,
        height: 250,
        color: Colors.blue,
        alignment: Alignment.center,
        child: Container(
          width: 50,
          height: 50,
          color: Colors.deepOrange,
        ),
      ),
Screenshot:
Flutter Add Container Inside Container
Source code for main.dart file:
import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
      child: Container(
        width: 300,
        height: 250,
        color: Colors.blue,
        alignment: Alignment.center,
        child: Container(
          width: 50,
          height: 50,
          color: Colors.deepOrange,
        ),
      ),
    ))));
  }
}

Comments