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

Align the icon and title in the button with each other in Flutter

I want to display a list of buttons on a single screen, with the icon displayed at the leading of each button.

I want to align the buttons on the screen based on the button with the longest content. Icons and titles line up.

Here is an illustration

button-list

Tags:

2

Answers


  1. 0

    You can create a list of your title and sort that list according to the length of each title.

    Largest at first and smallest at last.

    Now using this list create a listView builder

    now in each button use Row as its child

    and Row children Icon and Text

    Now use mainAxisAlignment as MainAxisAlignment.start

    and wrap text to expand and align text to center

    In this way I think you can achieve what you want.

    Login or Signup to reply.
  2. 0

    You can make a model which will have the title and icon and colour for it. make a list of the this model:

    List<buttonDetails> list = [
  buttonDetails('Medium Title', Icons.density_medium, Colors.blueAccent),
  buttonDetails('Small Title', Icons.density_small, Colors.greenAccent),
  buttonDetails('VeryLarge Title', Icons.density_large, Colors.orangeAccent),
];

    Sort it according to the length of the title’s letter length, you can do it in the initState() like this:

    @override
void initState() {
  list.sort((a, b) => b.title.length.compareTo(a.title.length));
  super.initState();
}

    And show it with using ListView.builder:

    ListView.builder(
        shrinkWrap: true,
        itemCount: list.length,
        itemBuilder: (context, index) => MaterialButton(
          minWidth: 300,
          shape: RoundedRectangleBorder(
            borderRadius: SizeConstant.borderRadius14,
          ),
          color: list[index].color,
          onPressed: () {},
          child: Row(
            children: [
              Icon(
                list[index].icon,
              ),
              const SizedBox(width: 16,),
              Text(list[index].title),
            ],
          ),
        ).paddingAllDefault(),
      ),

    And will look like this:

    enter image description here

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

Back To Top
Search