We often will want to have our content centered, appearing in the middle of its parent element. The Center widget is a single-child layout widget made for this purpose. The Center widget makes a child widget appear in the center of its available area.
The Center widget uses the following syntax:
Center( child: Widget )
The child property allows us to specify the child widget we want to center. The Center widget is a single-child widget so only one Widget can go here.
Let’s look at an example centering a Text widget:
Center ( child: Text( 'Hello, world!' ) )
Notice that the Text widget has been added as an argument to the Center widget. It is surrounded by the parentheses of the Center widget.
Let’s try it out.
Instructions
Change the code in the workspace to center the Icon.
Hint
Make the Icon widget the child
of a Center widget.
Solution
The inside of main
should look like:
runApp( const MaterialApp( home: Scaffold( body: Center( child: Icon( Icons.center_focus_strong, color: Colors.red, size: 100.0, ) ) ) ) );