flutterflutter-design

Flutter design help custom tab bar


I'm pretty new to Flutter and need design advice for a custom appbar.

I want to achieve something like this: Desired result

I need this TabBar to be inside an AppBar and tried inserting it to the actions[] list.

It looks like this now: How it look now

Code for it:

actions: [
                Row(
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                      ),
                      height: 45,
                      width: 500,
                      child: TabBar(
                        labelColor: blue500,
                        tabs: _tab.tabs,
                        controller: _tab.tabController,
                        indicator: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Theme.of(context).colorScheme.secondaryContainer
                        ),
                      )
                    ),
                  ],
                )
              ]

Any ideas/suggestions would be welcome ;)

Thank you!


Solution

  • This is what I came up with:

    import 'package:flutter/material.dart';
    
    class TestPage extends StatefulWidget {
      const TestPage({Key? key}) : super(key: key);
    
      @override
      State<TestPage> createState() => _TestPageState();
    }
    
    class _TestPageState extends State<TestPage> {
    
      int selectedIndex = 0;
    
      @override
      Widget build(BuildContext context) {
        return DefaultTabController(
          length: 7,
          child: Scaffold(
            appBar: AppBar(
              title: const Text("TabBar"),
              bottom: TabBar(
                  isScrollable: true,
                  indicatorWeight: 2,
                  indicatorColor: Colors.blue,
                  labelColor: Colors.black,
                  onTap: (index){
                    setState(() {
                      selectedIndex = index;
                    });
                  },
                  indicatorSize: TabBarIndicatorSize.label,
                  tabs: [
                    Tab(
                        child: Container(
                            padding: const EdgeInsets.all(8.0),
                            decoration: BoxDecoration(
                              color: selectedIndex == 0 ? Colors.blue.shade100 : null,
                              borderRadius: BorderRadius.circular(10)
                            ),
                            child: const Text("Latest"),
                        ),
                    ),
                    Tab(
                      child: Container(
                        padding: const EdgeInsets.all(8.0),
                        decoration: BoxDecoration(
                            color: selectedIndex == 1 ? Colors.blue.shade100 : null,
                            borderRadius: BorderRadius.circular(10)
                        ),
                        child: const Text("Business"),
                      ),
                    ),
                    Tab(
                      child: Container(
                        padding: const EdgeInsets.all(8.0),
                        decoration: BoxDecoration(
                            color: selectedIndex == 2 ? Colors.blue.shade100 : null,
                            borderRadius: BorderRadius.circular(10)
                        ),
                        child: const Text("Sports"),
                      ),
                    ),
                    Tab(
                      child: Container(
                        padding: const EdgeInsets.all(8.0),
                        decoration: BoxDecoration(
                            color: selectedIndex == 3 ? Colors.blue.shade100 : null,
                            borderRadius: BorderRadius.circular(10)
                        ),
                        child: const Text("Entertainment"),
                      ),
                    ),
                    Tab(
                      child: Container(
                        padding: const EdgeInsets.all(8.0),
                        decoration: BoxDecoration(
                            color: selectedIndex == 4 ? Colors.blue.shade100 : null,
                            borderRadius: BorderRadius.circular(10)
                        ),
                        child: const Text("Science"),
                      ),
                    ),
                    Tab(
                      child: Container(
                        padding: const EdgeInsets.all(8.0),
                        decoration: BoxDecoration(
                            color: selectedIndex == 5 ? Colors.blue.shade100 : null,
                            borderRadius: BorderRadius.circular(10)
                        ),
                        child: const Text("Health"),
                      ),
                    ),
                    Tab(
                      child: Container(
                        padding: const EdgeInsets.all(8.0),
                        decoration: BoxDecoration(
                            color: selectedIndex == 6 ? Colors.blue.shade100 : null,
                            borderRadius: BorderRadius.circular(10)
                        ),
                        child: const Text("Technology"),
                      ),
                    ),
                  ]
              ),
            ),
            body: const TabBarView(
              children: [
                //add your pages here
                Text(""),
                Text(""),
                Text(""),
                Text(""),
                Text(""),
                Text(""),
                Text(""),
              ],
            ),
          ),
        );
      }
    }
    

    pic