Question 76822 in Flutter Question posted in
The official Flutter documentation can be found here.

ChoiceChip not expanding with IntrinsicWidth – Flutter

I’m wondering why ChoiceChip is not expanding like ElevatedButton does.

Here is an example: (look at dartpad)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(children: [
          IntrinsicWidth(
              child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              Expanded(
                  child: ElevatedButton(
                child: const Text('Larger Text'),
                onPressed: () {},
              )),
              Expanded(
                  child: ElevatedButton(
                child: const Text('Text'),
                onPressed: () {},
              )),
            ],
          )),
          IntrinsicWidth(
              child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: const [
              Expanded(
                  child: ChoiceChip(
                label: Text('Larger Text'),
                selected: false,
              )),
              Expanded(
                  child: ChoiceChip(
                label: Text('Text'),
                selected: false,
              )),
            ],
          ))
        ]);
  }
}
Tags:

2

Answers


  1. 0

    Because under the hood the widgets are designed differently (that’s why the names).

    I haven’t checked the code in detail (you can do that by ctrl + click on Widget Name).

    But best guess, visual density is lower in chips for being compact and higher in buttons.

    More on technical difference to understand which to use : chips-vs-button

    Login or Signup to reply.
  2. 0

    To solve this, let’s start by enabling Flutter Inspector, we can see the second IntrinsicWidth width and its children don’t fill their parent as the first one (two problems)

    enter image description here

    Solve 1st problem: IntrinsicWidth children don’t fill their parent width

    So, the problem is the size of the 2nd IntrinsicWidth‘s children is not wide/big enough so that it can be full of parent width. Try increasing its width manually by wrapping it in a Container with double.infinity width, like this:

    ChoiceChip(
  label: Container(width: double.infinity, child: Text('Larger Text')),
  selected: false,
)

    New result:

    enter image description here

    Solve 2nd problem: the 2nd IntrinsicWidth don’t fill their parent width

    Let’s leave Column children can have the maximum width as it is (removing all IntrinsicWidth inside its children) and then wrap the Column by an IntrinsicWidth. Complete sample code:

    Sample code

    import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return IntrinsicWidth(
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              Expanded(
                child: ElevatedButton(
                  child: const Text('Larger Text'),
                  onPressed: () {},
                ),
              ),
              Expanded(
                child: ElevatedButton(
                  child: const Text('Text'),
                  onPressed: () {},
                ),
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              Expanded(
                child: ChoiceChip(
                  label: Container(width: double.infinity, child: Text('Larger Text')),
                  selected: false,
                ),
              ),
              Expanded(
                child: ChoiceChip(
                  label: Container(width: double.infinity, child: Text('Text')),
                  selected: false,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

    Final result:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search