flutterflutter-layoutsegmentedcontrol

Designing issue with Flutter's CupertinoSlidingSegmentedControl?


The first image is what I'm trying to make, but using flutter CupertinoSlidingSegmentedControl does not allow to add border radius. the second image is what I have made so far.

I want to add border radius to my CupertinoSlidingSegmentedControl options. The goal is to make it look like tab but with a sliding effect. I have tried making it with Flutter Tabbar but tabbar doesn't have any sliding effect. Now CupertinoSlidingSegmentedControl does not have border property. I am adding my code here.

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

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

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

     class SegmentedControl extends StatefulWidget {
      @override
        _SegmentedControlState createState() => _SegmentedControlState();
       }

       class _SegmentedControlState extends State<SegmentedControl> {
         int segmentedControlGroupValue = 0;


      final Map<int, Widget> myTabs = const <int, Widget>{
        0: Text( "Services",style: TextStyle(
        color: Colors.tealAccent,
         fontWeight: FontWeight.normal,fontSize: 20),),
           1: Text( "E-commerce",
          style: TextStyle(color: 
             Colors.tealAccent,
             fontWeight: FontWeight.normal,fontSize: 20,),),
         };

      @override
      Widget build(BuildContext context) {
      return Scaffold(
      endDrawerEnableOpenDragGesture: false, // This way it will not open
      drawer: Drawer(),
      appBar: AppBar(
      title: Container(
      alignment: Alignment.center,
      padding: EdgeInsets.all(5),
      child: CupertinoSlidingSegmentedControl(
        thumbColor: Colors.teal,
        padding: EdgeInsets.only(
          left: 8,
          right: 8,
          top: 5,
          bottom: 5,
        ),
        backgroundColor: Colors.white,
        children: myTabs,
        groupValue: segmentedControlGroupValue,
        onValueChanged: (i) {
          setState(() {
            segmentedControlGroupValue = i;
          });
         // segmentedControlGroupValue == 0;
        },
      ),
    ),
    ),
);

} }


Solution

  • try this custom_sliding_segmented_control:

    CustomSlidingSegmentedControl<int>(
                  children: {
                    0: Text('Services'),
                    1: Text('E-Commerce'),
                  },
                  duration: Duration(milliseconds: 200),
                  radius: 30.0,
                  onValueChanged: (index) {
                    print(index);
                  },
                ),