如何在 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?

Answer 1

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

Answer 2

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,
        ),
      ),
    ),
  ),
 ),
 );
 }