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:
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
Post a Comment