CODEWITHSUNDEEP
flutterflutter-layoutflutter-animation
palak
palak

Reputation: 401

how to make responsive container in flutter

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?

Upvotes: 3

Views: 3756

Answers (2)

Yash Thummar
Yash Thummar

Reputation: 176

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

Upvotes: 0

m123
m123

Reputation: 3152

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

Upvotes: 2

Related Questions