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

Does Flutter’s Wrap, Positioned, Chip have layout inconsistencies between platforms?

I am developing a widget for "Badges" for my app and have discovered that it lays out as intended on some platforms but not on others. For example, here is a screen shot for Chrome where the badge layout is what I want:

enter image description here

But the layout is not correct in the iOS simulator:

enter image description here

As you can see, the stars are no longer aligned within the Chip and the spacing between "rows" has increased.

I have created a simple Flutter app which you can use to reproduce this problem. The README provides more details on the issue:

https://github.com/philipmjohnson/fluttermonarchlayout

Any suggestions on how to proceed with this issue would be highly appreciated!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I received a few suggestions and have summarized the approaches and the solution I decided upon here:

    https://github.com/philipmjohnson/fluttermonarchlayout/tree/main#solutions


  2. 0

    The label parameter in the Chip widget accepts a Widget. You can wrap your Text widget with a Row and place the dots before your Text.

    Example:

    class BadgeIcon extends StatelessWidget {
  const BadgeIcon({Key? key, required this.name, required this.level})
      : super(key: key);
  final String name;
  final int level;

  @override
  Widget build(BuildContext context) {
    const Color selectedColor = Colors.black;
    BadgeDot dot = const BadgeDot(color: selectedColor);

    List<Widget> dots = [];
    if (level == 1) {
      dots = [dot];
    } else if (level == 2) {
      dots = [dot, dot];
    } else if (level == 3) {
      dots = [dot, dot, dot];
    }

    return Padding(
      padding: const EdgeInsets.all(3.0),
      child: Chip(
        label: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: dots,
            ),
            const SizedBox(width: 4),
            Text(name),
          ],
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search