Created
June 9, 2021 17:55
-
-
Save FantasyCheese/47f87c03d38042d7543dd46721eeb07e to your computer and use it in GitHub Desktop.
Radio Group
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:flutter/cupertino.dart'; | |
| import 'package:flutter/material.dart'; | |
| void main() { | |
| runApp(App()); | |
| } | |
| class App extends StatelessWidget { | |
| final doubleListQueue = ["personalName", "carrierType", "email"]; | |
| final tripleListQueue = ["companyName", "taxID", "email"]; | |
| final typeNotifier = ValueNotifier<ReceiptType>(ReceiptType.doubleReceipt); | |
| @override | |
| Widget build(BuildContext context) { | |
| return MaterialApp( | |
| home: Scaffold( | |
| body: Column( | |
| children: [ | |
| RadioColumnGroup( | |
| options: ["二聯式 (預設)", "三聯式 (公司/營業機構)"], | |
| onSelected: (int selectedIndex) { | |
| typeNotifier.value = ReceiptType.values[selectedIndex]; | |
| }, | |
| ), | |
| ValueListenableBuilder( | |
| valueListenable: typeNotifier, | |
| builder: (context, type, _) { | |
| final queue = type == ReceiptType.doubleReceipt ? doubleListQueue : tripleListQueue; | |
| return Column(children: queue.map((e) { | |
| switch(e) { | |
| case "personalName": | |
| return Padding( | |
| padding: | |
| const EdgeInsets.symmetric(horizontal: 16.0, vertical: 10.0), | |
| child: TextField( | |
| decoration: InputDecoration( | |
| labelText: "受買人（個人）", hintText: "請輸入受買人姓名")), | |
| ); | |
| break; | |
| case "companyName": | |
| return Padding( | |
| padding: | |
| const EdgeInsets.symmetric(horizontal: 16.0, vertical: 10.0), | |
| child: TextField( | |
| decoration: InputDecoration( | |
| labelText: "受買人（公司名稱）", hintText: "請輸入受買人姓名")), | |
| ); | |
| break; | |
| case "taxID": | |
| return Padding( | |
| padding: | |
| const EdgeInsets.symmetric(horizontal: 16.0, vertical: 10.0), | |
| child: TextField( | |
| decoration: | |
| InputDecoration(labelText: "統一編號", hintText: "12345678")), | |
| ); | |
| break; | |
| case "email": | |
| return Padding( | |
| padding: | |
| const EdgeInsets.symmetric(horizontal: 16.0, vertical: 10.0), | |
| child: TextField( | |
| decoration: InputDecoration( | |
| labelText: "電子信箱", hintText: "example@gmail.com")), | |
| ); | |
| break; | |
| case "carrierType": | |
| return RadioColumnGroup( | |
| options: ["手機條碼", "自然人憑證", "無載具"], | |
| onSelected: (int selectIndex) { | |
| print(selectIndex); | |
| }, | |
| ); | |
| break; | |
| } | |
| }).toList()); | |
| }, | |
| ), | |
| ], | |
| ), | |
| ), | |
| ); | |
| } | |
| } | |
| enum ReceiptType { doubleReceipt, tripleReceipt } | |
| class RadioColumnGroup extends StatefulWidget { | |
| const RadioColumnGroup( | |
| {Key key, this.options, this.onSelected, this.defaultIndex = 0}) | |
| : super(key: key); | |
| final List<String> options; | |
| final void Function(int) onSelected; | |
| final int defaultIndex; | |
| @override | |
| _RadioColumnGroupState createState() => _RadioColumnGroupState(); | |
| } | |
| class _RadioColumnGroupState extends State<RadioColumnGroup> { | |
| String groupValue; | |
| @override | |
| void initState() { | |
| super.initState(); | |
| groupValue = widget.options[widget.defaultIndex]; | |
| } | |
| @override | |
| Widget build(BuildContext context) { | |
| return Column( | |
| mainAxisSize: MainAxisSize.min, | |
| children: widget.options | |
| .map( | |
| (e) => RadioListTile<String>( | |
| title: Text(e), | |
| value: e, | |
| groupValue: groupValue, | |
| onChanged: (v) { | |
| setState(() => groupValue = v); | |
| widget.onSelected(widget.options.indexOf(v)); | |
| }, | |
| ), | |
| ) | |
| .toList(), | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment