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
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
I could have achieve this by doing this.
Changed Expanded widget to flexible and set shrinkWrap property to be true