我是扑朔迷离的新手,我需要自定义一个切换按钮,如下所示,有人可以帮我吗,我使用堆栈并放置了两个重叠的按钮,但是当它们改变了移动显示时,所以任何一个请帮助我。 Image
答案 0 :(得分:1)
希望它可以帮助您:
import 'package:flutter/material.dart';
class ToggleButton extends StatefulWidget {
@override
_ToggleButtonState createState() => _ToggleButtonState();
}
const double width = 300.0;
const double height = 60.0;
const double loginAlign = -1;
const double signInAlign = 1;
const Color selectedColor = Colors.white;
const Color normalColor = Colors.black54;
class _ToggleButtonState extends State<ToggleButton> {
double xAlign;
Color loginColor;
Color signInColor;
@override
void initState() {
super.initState();
xAlign = loginAlign;
loginColor = selectedColor;
signInColor = normalColor;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Demo'),
),
body: Center(
child: Container(
width: width,
height: height,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.all(
Radius.circular(50.0),
),
),
child: Stack(
children: [
AnimatedAlign(
alignment: Alignment(xAlign, 0),
duration: Duration(milliseconds: 300),
child: Container(
width: width * 0.5,
height: height,
decoration: BoxDecoration(
color: Colors.lightGreen,
borderRadius: BorderRadius.all(
Radius.circular(50.0),
),
),
),
),
GestureDetector(
onTap: () {
setState(() {
xAlign = loginAlign;
loginColor = selectedColor;
signInColor = normalColor;
});
},
child: Align(
alignment: Alignment(-1, 0),
child: Container(
width: width * 0.5,
color: Colors.transparent,
alignment: Alignment.center,
child: Text(
'Login',
style: TextStyle(
color: loginColor,
fontWeight: FontWeight.bold,
),
),
),
),
),
GestureDetector(
onTap: () {
setState(() {
xAlign = signInAlign;
signInColor = selectedColor;
loginColor = normalColor;
});
},
child: Align(
alignment: Alignment(1, 0),
child: Container(
width: width * 0.5,
color: Colors.transparent,
alignment: Alignment.center,
child: Text(
'Signin',
style: TextStyle(
color: signInColor,
fontWeight: FontWeight.bold,
),
),
),
),
),
],
),
),
),
);
}
}