animated_segmented_tab_control_plus 2.0.2

A customizable segmented control that can be used with a TabView.

example/lib/main.dart

import 'package:animated_segmented_tab_control_plus/animated_segmented_tab_control_plus.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  TextDirection _textDirection = TextDirection.ltr;
  late final TabController _tabController;

  final List<String> _labels = ['ACCOUNT', 'HOME', 'NEW'];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _labels.length, vsync: this);
    _tabController.addListener(() {
      final label = _labels[_tabController.index];
      if (_tabController.indexIsChanging) {
        debugPrint('Tab is changing to index: ${_tabController.index} (Label: $label)');
      } else {
        debugPrint('Tab changed to index: ${_tabController.index} (Label: $label)');
      }
    });
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final textStyle = Theme.of(context).textTheme.bodyLarge;
    final selectedTextStyle = textStyle?.copyWith(fontWeight: FontWeight.bold);
    return MaterialApp(
      builder: (context, child) {
        return Directionality(
          textDirection: _textDirection,
          child: child!,
        );
      },
      home: Scaffold(
        body: SafeArea(
          child: Stack(
            children: [
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: SegmentedTabControl(
                  controller: _tabController,
                  // Customization of widget
                  tabTextColor: Colors.black,
                  selectedTabTextColor: Colors.white,
                  indicatorPadding: const EdgeInsets.all(4),
                  squeezeIntensity: 2,
                  tabPadding: const EdgeInsets.symmetric(horizontal: 8),
                  textStyle: textStyle,
                  selectedTextStyle: selectedTextStyle,
                  // Options for selection
                  // All specified values will override the [SegmentedTabControl] setting
                  tabs: [
                    SegmentTab(
                      label: _labels[0],
                      // For example, this overrides [indicatorColor] from [SegmentedTabControl]
                      color: Colors.red.shade300,
                      backgroundColor: Colors.red.shade100,
                    ),
                    SegmentTab(
                      label: _labels[1],
                      backgroundColor: Colors.blue.shade100,
                      color: Colors.blue.shade300,
                    ),
                    SegmentTab(
                      label: _labels[2],
                      backgroundColor: Colors.orange.shade100,
                      color: Colors.orange.shade300,
                    ),
                  ],
                ),
              ),
              // Sample pages
              Padding(
                padding: const EdgeInsets.only(top: 70),
                child: TabBarView(
                  controller: _tabController,
                  physics: const BouncingScrollPhysics(),
                  children: [
                    SampleWidget(
                      key: const PageStorageKey('page1'),
                      label: 'FIRST PAGE',
                      color: Colors.red.shade100,
                    ),
                    SampleWidget(
                      key: const PageStorageKey('page2'),
                      label: 'SECOND PAGE',
                      color: Colors.blue.shade100,
                    ),
                    SampleWidget(
                      key: const PageStorageKey('page3'),
                      label: 'THIRD PAGE',
                      color: Colors.orange.shade100,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.white,
          onPressed: () {
            setState(() {
              _textDirection = _textDirection == TextDirection.ltr
                  ? TextDirection.rtl
                  : TextDirection.ltr;
            });
            debugPrint('Text direction changed to: $_textDirection');
          },
          child: Icon(
            Icons.language,
            color: Theme.of(context).primaryColor,
          ),
        ),
      ),
    );
  }
}

class SampleWidget extends StatelessWidget {
  const SampleWidget({
    Key? key,
    required this.label,
    required this.color,
  }) : super(key: key);

  final String label;
  final Color color;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: color,
        borderRadius: const BorderRadius.vertical(top: Radius.circular(10)),
      ),
      child: Text(label),
    );
  }
}