how to make responsive container in flutter

Question

i want to make my container responsive of image size, but somehow it is not working.

below is the container that I have made-:

Container(
              height: size.height * 0.7,
              width: size.width * 0.95,
              decoration: BoxDecoration(
                // borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
                image: DecorationImage(
                  image: AssetImage('assets/vir.gif'),//widget.user.imgUrl),
                  fit: BoxFit.contain,
                ),
              ),
              child: Container(
                decoration: BoxDecoration(
                  // borderRadius: BorderRadius.circular(10),
                  boxShadow: [
                    BoxShadow(color: Colors.black12, spreadRadius: 0.5),
                  ],
                ),
              ),
            ),

here if the height of image is same as the container then it is good but if the height is less then I am able to see the background that I don't want.

even if I add any information in the container the height remains fixed and doesn't adjust to the content.

below is another example for this -:

 Container(
              height: size.height * 0.2,
              width: size.width * 0.95,
              decoration: BoxDecoration(
                color: Colors.pink[100],
              ),
              child: Column(
                children: [

                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 15),
                    child: Wrap(
                        spacing: 10,
                        children: [

                          Chip(
                            elevation: 5,
                            label: Text('Height'),
                            labelStyle: TextStyle(
                              color: Colors.white,
                              fontSize: 17,
                            ),
                            backgroundColor: Colors.pinkAccent,
                            deleteIcon: Icon(Icons.height),
                            // labelPadding: EdgeInsets.symmetric(horizontal: 10),
                          ),

                          Chip(
                            elevation: 5,
                            label: Text('Active'),
                            labelStyle: TextStyle(
                              color: Colors.white,
                              fontSize: 17,
                            ),
                            backgroundColor: Colors.pinkAccent,
                            labelPadding: EdgeInsets.symmetric(horizontal: 10),
                          ),

                          Chip(
                            elevation: 5,
                            label: Text('Start Sign'),
                            labelStyle: TextStyle(
                              color: Colors.white,
                              fontSize: 17,
                            ),
                            backgroundColor: Colors.pinkAccent,
                            labelPadding: EdgeInsets.symmetric(horizontal: 10),
                          ),


                        ]
                    ),
                  )



                ],
              ),
            ),

here if I add or delete any content then I have to increase or decrease the size manually. can anyone help me with this?

user_13313941 · Answer

You don't need to provide a hight or a with. The container adapts to the size of the child.

Docs:

Otherwise, the widget has a child but no height, no width, no constraints, and no alignment, and the Container passes the constraints from the parent to the child and sizes itself to match the child.

Flutter Widget of the week

user_12772833 · Answer

import 'package:flutter/material.dart';

void main() {
  runApp(
  MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('Hello'),
      centerTitle: true,
    ),
    body: Container(
      alignment: Alignment.center,
      child: Container(
        height: 200,
        width: 200,
        child: Image(
          image: NetworkImage(
              'https://images.unsplash.com/photo-1593642634402-b0eb5e2eebc9? 
               ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb- 
               1.2.1&auto=format&fit=crop&w=1050&q=80'),
          fit: BoxFit.cover,
        ),
      ),
    ),
  ),
 ),
 );
 }

how to make responsive container in flutter

2 Answers