Tuesday, 25 June 2024

flutter tabbar

 import 'package:flutter/material.dart';

import 'package:flutter/cupertino.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 9,
      child: Scaffold(
          appBar: AppBar(
            elevation: 0,
            backgroundColor: Colors.white,
            title: const CupertinoSearchTextField(),

            bottom: const TabBar(
              isScrollable: true,
              indicatorColor: Colors.yellow,
              indicatorWeight: 7,
              tabs: [
                RepeatedTab(label:'Men'),
                RepeatedTab(label:'WoMen'),
                RepeatedTab(label:'shoe'),
                RepeatedTab(label:'Bags'),
                RepeatedTab(label:'Electronics'),
                RepeatedTab(label:'Accessories'),
                RepeatedTab(label:'Kids'),
                RepeatedTab(label:'Beauty'),

              ],
            ),
          ),
          body: const TabBarView(
            children: [
              Center(
                child: Text('men screen'),
              ),
              Center(
                child: Text('women screen'),
              ),
              Center(
                child: Text('shoes screen'),
              ),
              Center(
                child: Text('Elec screen'),
              ),
              Center(
                child: Text('Bags screen'),
              ),
              Center(
                child: Text('Access screen'),
              ),
              Center(
                child: Text('kids screen'),
              ),
              Center(
                child: Text('Beauty screen'),
              )
            ],
          )),
    );
  }
}

class RepeatedTab extends StatelessWidget {
  final String label;

  const RepeatedTab({
    super.key, required this.label,
  });

  @override
  Widget build(BuildContext context) {
    return Tab(
      child: Text(
        label,
        style: TextStyle(color: Colors.grey.shade600),
      ),
    );
  }
}

No comments:

Post a Comment

7 Common mistakes in Dot Net — You can avoid

  There are many common mistakes made during .NET (ASP.NET, .NET Core) development, which affect performance, security, and code… Code Crack...