How to use container in flutter
Deepak Tailor - Dec 07 2021
Container is the most used widget in Flutter. In this we can add many children. We can manage the container with height, width, padding, margin. Its like - for making custom buttons, for card design etc.
Container widgets properties
Several properties are provided to manage the container.
1. Color : set background color
2. Padding : set padding
3. Margin : set margin
4. Decoration : set decoration list border, box shadow
5. Child : add child inside container
6. Height : set container height
7. Width : set container width
8. Alignment : set container alignment
9. Key : set container key
10. Clip behavior : The content will be clipped according to option.
11. Constraints : set the box constraints
12. Foreground decoration : set the container decoration
13. Transform : rotate the container
14. Transform alignment : set container transform alignment
Create simple container
child: Container(
width: 200,
height: 200,
color: Colors.black,
),container convert to circle
Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(100.0)
),
)Design custom button using container
Center(
child: Container(
width: 230.0,
height: 80.0,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5.0)
),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.search, color: Colors.white,),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text("Search Products", style: TextStyle(color: Colors.white, fontSize: 20.0)),
)
],
),
),
),
),Design custom article card
Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
padding: EdgeInsets.all(16.0),
height: 410.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5.0)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.network("https://cdn.wallpapersafari.com/44/38/SmEPKM.jpg"),
SizedBox(height: 20.0,),
Text("Card( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(40), // if you need this side: BorderSide( color: Colors.grey.", style: TextStyle(fontSize: 18.0),),
SizedBox(height: 10.0,),
ElevatedButton(onPressed: (){}, child: Text("Read More"))
],
)
),
),Deepak Tailor
My name is Deepak tailor as a fullstack developer. I have been in the IT industry (PHP, Nodejs, flutter) for the last 5 years. For professional and customize web development & app development, you can send inquiry on our email.
----
You can contact him at deepaktailor10@yahoo.in