How to change the width of a container by a boolean value?-CodePudding

I am trying to change the width of a container dynamically. I have four containers in a row. I hide other three when a user selects a value (taps on a filter icon having bool value). The problem is that when I hide the other three (using visibility), the remaining container takes the space of full row.

What I want is this: Keep the default width of the container when the bool value is true, else take 1/4 value of the device width using media query.

Thanks in Advance! Regards

CodePudding user response：

Try use Flexible widget and set flex: for widget child

Example:

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool _button1Show = true;
  bool _button2Show = true;
  bool _button3Show = true;
  bool _button4Show = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          children: [
            Visibility(
              visible: _button1Show,
              child: Flexible(
                child: GestureDetector(
                  onTap: (){
                    setState(() {
                      _button1Show = false;
                    });
                  },
                  child: Container(
                    height: 50,
                    color: Colors.red,
                  ),
                ),
                flex: 1,
              ),
            ),
            Visibility(
              visible: _button2Show,
              child: Flexible(
                child: GestureDetector(
                  onTap: (){
                    setState(() {
                      _button2Show = false;
                    });
                  },
                  child: Container(
                    height: 50,
                    color: Colors.green,
                  ),
                ),
                flex: 1,
              ),
            ),
            Visibility(
              visible: _button3Show,
              child: Flexible(
                child: GestureDetector(
                  onTap: (){
                    setState(() {
                      _button3Show = false;
                    });
                  },
                  child: Container(
                    height: 50,
                    color: Colors.grey,
                  ),
                ),
                flex: 1,
              ),
            ),
            Visibility(
              visible: _button4Show,
              child: Flexible(
                child: GestureDetector(
                  onTap: (){
                    setState(() {
                      _button4Show = false;
                    });
                  },
                  child: Container(
                    height: 50,
                    color: Colors.yellow,
                  ),
                ),
                flex: 1,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

This might point you in the right direction:

Container(
  width: myBool ? 200 : MediaQuery.of(context).size.width * 0.25,
  
  ...

However, the better solution might be to set each Row's child width to 1/4 of the overall width:

Row(
      children: <Widget>[
        Expanded(
          flex: 1, // 25%
          child: Container(color: Colors.red),
        ),
        Expanded(
          flex: 1, // 25%
          child: Container(color: Colors.green),
        ),
        Expanded(
          flex: 1, // 25%
          child: Container(color: Colors.blue),
        )
        Expanded(
          flex: 1, // 25%
          child: Container(color: Colors.yellow),
        )
      ],
    )