CODEWITHSUNDEEP
flutterflutter-layoutsegmentedcontrol
safiya
safiya

Reputation: 40

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;
        },
      ),
    ),
    ),
);

} }

Upvotes: 2

Views: 1375

Answers (1)

Jim
Jim

Reputation: 7601

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);
              },
            ),

Upvotes: 3

Related Questions