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

Flutter – How to expand color in ListView row?

I’ve got to this stage of a simple app, and am kind of stuck. I’m trying to make a ListView with rows, and a button "behind" the rows, so then whenever you click on a ListView Row, it will take you to a new screen. I’ve noticed whenever I’ve added a button to a row however, that the row’s color suddenly shrinks, and I cannot "expand" the color to fill the whole row back up again. I’ve tried the Expanded() widget with the flex property, but that did not do anything at all. Here is the piece of the code that I need help with, and a picture of the problem.

            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const NewScreen(),
                  ),
                );
              },
              child: Container(
                color: Colors.yellow,
                height: 100.0,
                child: const Center(
                  child: Text('Entry B'),
                ),
              ),
            ),

As you can see, the yellow color has shrinked to a box, and you can see the button behind the row. I need the yellow to fully fill the row, as picture 2 shows.

enter image description here

Picture 2: You may see it better here. Again, I would like the yellow color to look like the other 3 (which do not have a button assigned to them yet

enter image description here

I’ve tried the Expanded() widget, but it didn’t work.

Tags:

3

Answers


  1. 0

    ElevatedButton has it self style property in which you can specify the color for the button like this:

    ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.yellow,
                    ),
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const NewScreen(),
                        ),
                      );
                    },
                    child: const Center(
                      child: Text('Entry B'),
                    ),
                  ),
    Login or Signup to reply.
  2. 0

    There is 2 ways that you can do your task, using ElevatedButton or using Container.

    Example for ElevatedButton

    Expanded(
  child: ElevatedButton(
    style: ElevatedButton.styleFrom(
      shape: const RoundedRectangleBorder(),
      elevation: 0,
      backgroundColor: Colors.yellow,
      maximumSize: const Size.fromHeight(100),
    ),
    onPressed: () {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => const NewScreen(),
        ),
      );
    },
    child: const Text('Entry B'),
  ),
),

    Example for Container

    Expanded(
  child: InkWell( // or `GestureDetector`
    onTap: (){
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => const NewScreen(),
        ),
      );
    },
    child: Container(
      color: Colors.yellow,
      height: 100.0,
      child: const Center(
        child: Text('Entry B'),
      ),
    ),
  ),
),
    Login or Signup to reply.
  3. 0

    This is not the correct use-case of ElevatedButton. You shouldn’t use ElevatedButton here. You can make use of InkWell or GestureDetector along with Container (just to get your color) instead of ElevatedButton. ElevatedButton should be preferred to use when you have an actual button. In your case, it’s just a clickable UI Element.

    Hence, you can use the following code:

    InkWell(
    onTap: (){
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => const NewScreen(),
        ),
      );
    },
    child: Container(
      color: Colors.yellow,
      height: 100.0,
      width: MediaQuery.sizeOf(context).width,
      child: const Center(
        child: Text('Entry B'),
      ),
    ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search