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