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

How to develop this tab like ui in flutter? Is this custom ui or is there any package for it?

on tapping team right side content will change. Also how to put vertical and horizontal dividers as well

enter image description here

Tags:

2

Answers


  1. 0

    In this example:

    We use DefaultTabController to manage the tab selection.
    The TabBar widget is used twice, once at the top (hidden in the AppBar) for the horizontal tabs and once on the left for the vertical tabs.
    The TabBarView displays the content for the selected tab on the right side.
    You can customize the appearance and content of the tabs and their corresponding content to fit your specific needs.

    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyTabs(),
    );
  }
}

class MyTabs extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2, // Number of tabs
      child: Scaffold(
        appBar: AppBar(
          title: Text('Vertical Tabs Example'),
          // Remove the horizontal app bar
          bottom: PreferredSize(
            preferredSize: Size.fromHeight(0),
            child: TabBar(
              isScrollable: true,
              labelColor: Colors.blue,
              unselectedLabelColor: Colors.grey,
              labelStyle: TextStyle(fontWeight: FontWeight.bold),
              tabs: [
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
              ],
            ),
          ),
        ),
        body: Row(
          children: <Widget>[
            // Vertical Tab Selector
            Container(
              width: 100, // Adjust the width as needed
              color: Colors.grey[200],
              child: Column(
                children: [
                  // Create a TabBar with vertical alignment
                  TabBar(
                    isScrollable: true,
                    labelColor: Colors.blue,
                    unselectedLabelColor: Colors.grey,
                    labelStyle: TextStyle(fontWeight: FontWeight.bold),
                    tabs: [
                      Tab(text: 'Tab 1'),
                      Tab(text: 'Tab 2'),
                    ],
                  ),
                ],
              ),
            ),

            // Content for the selected tab - Use a Column of CheckBoxListTile instead of Center
            Expanded(
              child: TabBarView(
                children: [
                  Center(child: Text('Tab 1 Content')),
                  Center(child: Text('Tab 2 Content')),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    This code will work for you, I can’t post images already:

    import 'package:flutter/material.dart';
    
enum TabType { activity, team }

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyTabs(),
    );
  }
}

class MyTabs extends StatefulWidget {
  const MyTabs({super.key});

  @override
  State<MyTabs> createState() => _MyTabsState();
}

class _MyTabsState extends State<MyTabs> {
  late TabType _selectedTab;

  @override
  void initState() {
    super.initState();
    _selectedTab = TabType.activity;
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2, // Number of tabs
      child: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: const Text('Filter'),
          leading: IconButton(
            onPressed: () {
              // TODO implement onPressed
            },
            icon: const Icon(Icons.close),
          ),
        ),
        body: Row(
          children: <Widget>[
            // Vertical Tab Selector
            Container(
              width: 100.0,
              color: Colors.grey[200],
              child: Column(
                children: [
                  // Create a TabBar with vertical alignment
                  Container(
                    decoration: BoxDecoration(
                      border: Border(
                        right: BorderSide(
                          color: _selectedTab == TabType.activity
                              ? Colors.blue
                              : Colors.transparent,
                          width: 5.0, // Adjust the width as needed
                        ),
                      ),
                    ),
                    child: ListTile(
                      onTap: () => setState(() => _selectedTab = TabType.activity),
                      title: const Text('Activity'),
                    ),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      border: Border(
                        right: BorderSide(
                          color:
                              _selectedTab == TabType.team ? Colors.blue : Colors.transparent,
                          width: 5.0, // Adjust the width as needed
                        ),
                      ),
                    ),
                    child: ListTile(
                      onTap: () => setState(() => _selectedTab = TabType.team),
                      title: const Text('Team'),
                    ),
                  ),
                ],
              ),
            ),

            // Content for the selected tab
            Expanded(
                child: Column(
              children: _buildTabContent(),
            )),
          ],
        ),
      ),
    );
  }

  List<Widget> _buildTabContent() {
    if (_selectedTab == TabType.activity) {
      return [
        CheckboxListTile(
          value: true,
          onChanged: (_) {},
          title: const Text('Checkbox1'),
        ),
        CheckboxListTile(
          value: true,
          onChanged: (_) {},
          title: const Text('Checkbox2'),
        ),
        CheckboxListTile(
          value: true,
          onChanged: (_) {},
          title: const Text('Checkbox3'),
        )
      ];
    } else {
      return [
        const Center(
          child: Text('Content of Team Tab'),
        )
      ];
    }
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search