Flutter, How to center a scrollable bottom navigationbar when the screen gets bigger than the width of the navigation bar

Question

I'm trying to make a bottom navigation bar with buttons to filter out different languages from a to-do list app. I have a non scrollable button that (de)selects all buttons and a listview with buttons. When the app is small (phone) it can scroll fine but on a bigger screen (computer) it doesn't center. I want the first button to not be scrollable, the rest has to be scrollable if it doesn't fit on the screen, otherwise it will has to be centered

code:

bottomNavigationBar: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: null,
            child: Icon(Icons.cancel_outlined),
          ),
          Expanded(
            child: SizedBox(
              height: 30,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: [
                  ElevatedButton(
                    onPressed: () => setState(() {
                      filterLanguage[1];
                    }),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.grey),
                    child: const Text("Real Life"),
                  ),
                  ElevatedButton(
                    onPressed: () => setState(() {}),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.lightBlue),
                    child: const Text("Python"),
                  ),
                  ElevatedButton(
                    onPressed: () => setState(() {}),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.orange),
                    child: const Text("HTML"),
                  ),
                  ElevatedButton(
                    onPressed: () => setState(() {}),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
                    child: const Text("Java"),
                  ),
                  ElevatedButton(
                    onPressed: () => setState(() {}),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.blue[600]),
                    child: const Text("Flutter"),
                  ),
                  ElevatedButton(
                    onPressed: () => setState(() {}),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.purple),
                    child: const Text("C++"),
                  ),
                  ElevatedButton(
                    onPressed: () => setState(() {}),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.teal),
                    child: const Text("Arduino"),
                  ),
                  ElevatedButton(
                    onPressed: () => setState(() {}),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.green[900]),
                    child: const Text("Kotlin"),
                  ),
                  ElevatedButton(
                    onPressed: () => setState(() {}),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                    child: const Text("My Website"),
                  ),
                  ElevatedButton(
                    onPressed: () => setState(() {}),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.black),
                    child: const Text(
                      "Other",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ],
              ),
            ),
          )
        ],
      ),

small screen, scrolled to the left

small screen, scrolled to the right

big screen, not centered

I've tried the mainAxisAlignment but it does nothing.

I don't know if it has something to do with the width of the listView and if so how can I limit the width to the elements

I'm new to flutter so go easy on me 😁

Answer 1

I could have achieve this by doing this.

 **Flexible(**
            child: SizedBox(
              height: 30,
              child: ListView(
                scrollDirection: Axis.horizontal,
                **shrinkWrap: true**,

Changed Expanded widget to flexible and set shrinkWrap property to be true