答案 0 :(得分:1)
您可以使用custom_switch软件包。我将其更改为linearGradient。
library custom_switch;
import 'package:flutter/material.dart';
class CustomSwitch extends StatefulWidget {
final bool value;
final ValueChanged<bool> onChanged;
final Color activeColor;
final Color inactiveColor;
final String activeText;
final String inactiveText;
final Color activeTextColor;
final Color inactiveTextColor;
const CustomSwitch(
{Key key,
this.value,
this.onChanged,
this.activeColor,
this.inactiveColor = Colors.grey,
this.activeText = '',
this.inactiveText = '',
this.activeTextColor = Colors.white70,
this.inactiveTextColor = Colors.white70})
: super(key: key);
@override
_CustomSwitchState createState() => _CustomSwitchState();
}
class _CustomSwitchState extends State<CustomSwitch>
with SingleTickerProviderStateMixin {
Animation _circleAnimation;
AnimationController _animationController;
@override
void initState() {
super.initState();
_animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 60));
_circleAnimation = AlignmentTween(
begin: widget.value ? Alignment.centerRight : Alignment.centerLeft,
end: widget.value ? Alignment.centerLeft : Alignment.centerRight)
.animate(CurvedAnimation(
parent: _animationController, curve: Curves.linear));
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animationController,
builder: (context, child) {
return GestureDetector(
onTap: () {
if (_animationController.isCompleted) {
_animationController.reverse();
} else {
_animationController.forward();
}
widget.value == false
? widget.onChanged(true)
: widget.onChanged(false);
},
child: Container(
width: 70.0,
height: 35.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
// I commented here.
// color: _circleAnimation.value == Alignment.centerLeft
// ? widget.inactiveColor
// : widget.activeColor,
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
// You can set your own colors in here!
colors: [
Colors.blue,
Colors.red,
],
),
),
child: Padding(
padding: const EdgeInsets.only(
top: 4.0, bottom: 4.0, right: 4.0, left: 4.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
_circleAnimation.value == Alignment.centerRight
? Padding(
padding: const EdgeInsets.only(left: 34.0, right: 0),
child: Text(
widget.activeText,
style: TextStyle(
color: widget.activeTextColor,
fontWeight: FontWeight.w900,
fontSize: 16.0),
),
)
: Container(),
Align(
alignment: _circleAnimation.value,
child: Container(
width: 25.0,
height: 25.0,
decoration: BoxDecoration(
shape: BoxShape.circle, color: Colors.white),
),
),
_circleAnimation.value == Alignment.centerLeft
? Padding(
padding: const EdgeInsets.only(left: 0, right: 34.0),
child: Text(
widget.inactiveText,
style: TextStyle(
color: widget.inactiveTextColor,
fontWeight: FontWeight.w900,
fontSize: 16.0),
),
)
: Container(),
],
),
),
),
);
},
);
}
}
这是main.dart:
import 'package:custom_switch/custom_switch.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.deepOrange
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
bool status = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Custom Switch Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CustomSwitch(
activeColor: Colors.pinkAccent,
value: status,
onChanged: (value) {
print("VALUE : $value");
setState(() {
status = value;
});
},
),
SizedBox(height: 12.0,),
Text('Value : $status', style: TextStyle(
color: Colors.black,
fontSize: 20.0
),)
],
),
),
);
}
}