How to achieve this design in flutter?-CodePudding

How to achieve this design in flutter. This is like a custom animated TabView.

CodePudding user response：

Use CupertinoSlidingSegmentedControl assuming the application follows the iOS design language.

  int? _selectedSegment = 0;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: CupertinoSlidingSegmentedControl(
          groupValue: _selectedSegment,
          onValueChanged: (int? value) {
            setState(() {
              _selectedSegment = value;
            });
          },
          children: const {
            0: Text('Orders'),
            1: Text('Order Requests'),
            2: Text('My Requests'),
          }
      )),
      child: Center(
        child: Text(
          'Selected Segment: $_selectedSegment',
        ),
      ),
    );
  }

CodePudding user response：

you can use "container_tab_indicator" package install it with flutter pub add container_tab_indicator

then use like this:

import 'package:container_tab_indicator/container_tab_indicator.dart';

...

TabBar(
  tabs: [
    Text('Orders', style: TextStyle(color: Colors.pink[900])),
    Text('Order Requests', style: TextStyle(color: Colors.pink[900])),
    Text('My Requests', style: TextStyle(color: Colors.pink[900])),
  ],
  indicator: ContainerTabIndicator(
    //play with these properties as you see fit
    radius: BorderRadius.all(Radius.circular(16.0)),
    padding: const EdgeInsets.only(left: 36),
  ),
),