Flutter —Child center in Container
Lay out a widget
How do you layout a single widget in Flutter? This section shows you how to create and display a simple widget. It also shows the entire code for a simple Loading Animation app.
In Flutter, it takes only a few steps to put one Loading Animation on the screen with center.
- Select a layout widget
Choose from a variety of layout widgets based on how you want to align or constrain the visible widget, as these characteristics are typically passed on to the contained widget.
This example uses Center which centers its content horizontally and vertically.
2. Create a visible widget
For example, create a Loading widget:
ColorLoader2(color1: Colors.redAccent, color2: Colors.deepPurple, color3: Colors.green)3. Add the visible widget to the layout widget
All layout widgets have either of the following:
A child property if they take a single child — for example, Center or Container
A children property if they take a list of widgets — for example, Row, Column, ListView, or Stack.
Add the Loading widget to the Center widget:
Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Container(
child:
Container(child: ColorLoader2(color1: Colors.redAccent, color2: Colors.deepPurple, color3: Colors.green),),
)4. Add the layout widget to the page
A Flutter app is itself a widget, and most widgets have a build() method. Instantiating and returning a widget in the app’s build() method displays the widget.
Material apps
For a Material app, you can use a Scaffold widget; it provides a default banner, background color, and has API for adding drawers, snack bars, and bottom sheets. Then you can add the Center widget directly to the body property for the home page.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter layout demo',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter layout demo'),
),
body: Center(
// in the middle of the parent.
child: ColorLoader2(color1: Colors.redAccent, color2: Colors.deepPurple, color3: Colors.green)),
),
);
}
}Note: The Material library implements widgets that follow Material Design principles. When designing your UI, you can exclusively use widgets from the standard widgets library, or you can use widgets from the Material library. You can mix widgets from both libraries, you can customize existing widgets, or you can build your own set of custom widgets.
Non-Material apps
For a non-Material app, you can add the Center widget to the app’s build() method:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(color: Colors.white),
child: Center(
child: child: ColorLoader2(color1: Colors.redAccent, color2: Colors.deepPurple, color3: Colors.green)),
),
),
);
}
}By default a non-Material app doesn’t include an AppBar, title, or background color. If you want these features in a non-Material app, you have to build them yourself. This app changes the background color to white and the text to dark grey to mimic a Material app.
That’s it! When you run the app, you should see Loading Animation.

Loader Widget use in Demo :
Loading indicators for Flutter.
Loader animation For Flutter .
Layouts in Flutter.
Loading indicators animated with flutter

