Flutter实现自定义单选框
先看效果：
代码：
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutterfiledemo/untils/Message.dart';
class dxk extends StatefulWidget {
@override
_dxkState createState() => _dxkState();
}
class _dxkState extends State<dxk> {
//支付宝图片路径
String lj ="assets/images/wxzyf.png";
//微信支付
String lj2 ="assets/images/wxzyf.png";
//单选框的选择
bool dj = true;
bool dj2 = true;
//判断选中支付宝还是微信 默认支付宝
String pay ="ailipay";
//充值金额
String monysNums;
@override
Widget build(BuildContext context) {
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('充值页面'),
leading: new IconButton(
icon: new Icon(
Icons.chevron_left,
size: 35.0,
),
onPressed: () => Navigator.of(context).pop(),
),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
margin: const EdgeInsets.fromLTRB(20,10, 0, 0),
child: TextField(
//最大行数
maxLines: 1,
keyboardType: TextInputType.number,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
icon: Icon(
Icons.attach_money,
color: Colors.black,
),
labelText: '请输入你要充值的金额',
helperText: '充值金额不能为空',
),
// onChanged: _textFieldChanged,
autofocus: true,
onChanged: (value) {
monysNums = value;
},
),
),
new ListTile(
title: Container(
child: Stack(
children: <Widget>[
Image.asset(
'assets/images/ailipay.png',
height:ScreenUtil().setHeight(106),
width: ScreenUtil().setWidth(190),
),
new Align(
alignment: FractionalOffset.centerRight,
child: Image.asset(
"${lj}",
width: ScreenUtil().setWidth(55),
height: ScreenUtil().setHeight(70),
),
),
],
),
),
// trailing: Icon(Icons.chevron_right),
onTap: () {
setState(() {
if(dj){
pay = "ailipay";
lj = "assets/images/xz.png";
lj2 ="assets/images/wxzyf.png";
dj = false;
dj2 = true;
}else{
lj ="assets/images/wxzyf.png";
dj = true;
}
});
},
),
new ListTile(
title: Container(
child: Stack(
children: <Widget>[
Image.asset(
'assets/images/WePayLogo.png',
height:ScreenUtil().setHeight(66),
width: ScreenUtil().setWidth(230),
),
// new Text('昵称'),
new Align(
alignment: FractionalOffset.centerRight,
child: Image.asset(
"${lj2}",
width: ScreenUtil().setWidth(55),
height: ScreenUtil().setHeight(70),
),
),
],
),
),
// trailing: Icon(Icons.chevron_right),
onTap: () {
setState(() {
if(dj2){
pay = "wxpay";
lj2 = "assets/images/xz.png";
lj = "assets/images/wxzyf.png";
dj2 = false;
dj = true;
}else{
lj2 ="assets/images/wxzyf.png";
dj2 = true;
}
});
},
),
new Container(
height: 45.0,
margin: EdgeInsets.fromLTRB(10, 70, 10, 0),
child: new SizedBox.expand(
child: new RaisedButton(
onPressed: () {
//判断是哪个支付
Message.showToast("选中的是${pay}充值金额为:${monysNums}");
},
// color: Color.fromARGB(255, 61, 203, 128),
color: Colors.blue,
child: new Text(
'充值',
style: TextStyle(
fontSize: 14.0,
color: Color.fromARGB(255, 255, 255, 255)),
),
// shape: new RoundedRectangleBorder(
// borderRadius: new BorderRadius.circular(45.0)),
),
),
),
],
),
),
),
);
}
}
需要的文件：
支付宝Logo素材的话，可以去支付宝官网下载。我做的比较丑，可以优化一下。