- Customizing Fonts in Flutter with ExampleFlutter Skeleton Text with ExampleFlutter Themes with ExampleFlutter Lazy Loader with ExampleFlutter UI Orientation with ExampleFlutter Animation in Route Transition with ExampleFlutter Physics Simulation in Animation with ExampleFlutter Radial Hero Animation with ExampleFlutter Hinge Animation with ExampleFlutter Lottie Animation with Example
- URLs in Flutter with ExampleRoutes and Navigator in FlutterFlutter WebSockets with ExampleFlutter Named Routes with ExampleFlutter Arguments in Named RoutesMulti Page Applications in FlutterFlutter Updating Data on the InternetFlutter Fetching Data From the InternetFlutter Deleting Data On The InternetFlutter Sending Data To The InternetFlutter Send Data to Screen with Example
Container class in Flutter
In Flutter, the Container
class is a widget that provides a convenient way to create a rectangular box with various styling options. It can be used as a basic layout element to create spacing between other widgets, or as a wrapper for other widgets to provide visual styling.
The Container
widget has a number of properties that allow you to customize its appearance, including:
color
: The background color of the container.height
: The height of the container.width
: The width of the container.padding
: The amount of padding to apply around the contents of the container.margin
: The amount of space to put between this container and other widgets in the layout.decoration
: ABoxDecoration
object that allows you to set the border, background, and other visual properties of the container.
Here's an example of how to use the Container
widget
Container(
width: 200,
height: 200,
color: Colors.red,
)ā
In this example, we have created a Container
widget with a width and height of 200 pixels, and a red background color.
The Container
widget can also be used to create more complex layouts by wrapping other widgets inside it. For example, here's how we can use a Container
to add padding and a border to a Text
widget:
Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
),
child: Text('Hello, world!'),
)ā
In this example, we have created a
Container
with padding of 16 pixels on all sides, and a black border. We have also added a Text
widget as a child of the Container
, which will be centered within the container and have the specified padding and border.