how to fill the remaining space inside a row?-CodePudding

i have a row that includes a column widget.now as its second child i want to have a container to fill the remaining space.here is my code:

Row(
        children: [
          _status(),
          Constants.smallHorizontalSpacer,
          Padding(
            padding: const EdgeInsets.only(
              top: Constants.smallSize,
              bottom: Constants.smallSize,
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                _roundedAvatar(),
                _projectType(),
                _name(),
              ],
            ),
          ),
          _divider(),
          Padding(
            padding: const EdgeInsets.only(
              top: Constants.smallSize,
              bottom: Constants.smallSize,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Column(
                      children: [
                        _usageTypes(),
                        Constants.smallVerticalSpacer,
                        _details(),
                      ],
                    ),
                    Expanded(
                      child: Container(

                        height: 60,
                        color: Colors.black,
                        child: const Text('fill the remaining space'),
                      ),
                    ),
                  ],
                ),
                Constants.smallVerticalSpacer,
                _description(),
              ],
            ),
          ),
          // _map(context),
        ],
      ),

i have already tried expanded and flexble but all my widgets disappeared.any idea will be greate.

this is my result: https://i.stack.imgur.com/gFTwX.png

CodePudding user response：

You can wrap your Container with Expanded widget.

 Row(
  children: [
    ///.....widgets
    Flexible(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Column(
                children: [Text("A")],
              ),
              Expanded(
                child: Container(
                  width: 60,
                  height: 60,
                  color: Colors.black,
                  child: const Text('fill the remaining space'),
                ),

CodePudding user response：

Wrap the container with a flexible widget and give the container a width of the hoal screen:

Flexible(
  child: Container(
    width: ‌‌‌‌MediaQuery.of(context).size.width,
  ),
),

I know it does the same thing like a expanded widget but the expanded widget make's on a real device problems