How to use container in flutter

Deepak Tailor Image
Deepak Tailor - Dec 07 2021
How to use container in flutter

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
How to use container in flutter
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
How to use container in flutter
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 Image
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


Do you want to make website?

Message on WhatsApp, Plan your business idea with your website.

+91 7742307462