dating_touchme_app/lib/pages/mine/add_bankcard_page.dart

import 'package:dating_touchme_app/components/page_appbar.dart';
import 'package:dating_touchme_app/extension/ex_widget.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class AddBankcardPage extends StatefulWidget {
  const AddBankcardPage({super.key});

  @override
  State<AddBankcardPage> createState() => _AddBankcardPageState();
}

class _AddBankcardPageState extends State<AddBankcardPage> {


  String username = '';
  final TextEditingController _usernameController = TextEditingController();

  List<String> bankList = [
    "农业银行",
    "建设银行",
    "工商银行",
    "中信银行",
    "广发银行"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PageAppbar(title: "提现"),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsetsGeometry.symmetric(
            horizontal: 28.w,
            vertical: 16.w
          ),
          child: Column(
            children: [
              Container(
                padding: EdgeInsets.only(
                    bottom: 12.w
                ),
                decoration: BoxDecoration(
                    border: Border(
                        bottom: BorderSide(
                            width: 1,
                            color: const Color.fromRGBO(238, 238, 238, 1)
                        )
                    )
                ),
                child: Row(
                  children: [
                    Text(
                      "添加银行卡",
                      style: TextStyle(
                          fontSize: 14.w,
                          fontWeight: FontWeight.w500
                      ),
                    )
                  ],
                ),
              ),
              addItem(label: "持卡人", child: TextField(
                controller: _usernameController,
                keyboardType: TextInputType.number,
                style: TextStyle(
                    fontSize: ScreenUtil().setWidth(13),
                    height: 1,
                ),
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.symmetric(
                      vertical: 0,
                      horizontal: 0
                  ),
                  hintText: "请输入持卡人姓名",
                  hintStyle: TextStyle(
                    color: Colors.grey
                  ),

                  border: const OutlineInputBorder(
                    borderSide: BorderSide.none, // 这将移除边框 // 可选：设置圆角
                  ),
                  // 如果你希望聚焦时和未聚焦时都没有边框，也可以设置 focusedBorder 和 enabledBorder
                  focusedBorder: const OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.all(Radius.circular(4.0)),
                  ),
                  enabledBorder: const OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.all(Radius.circular(4.0)),
                  ),
                ),
                onChanged: (value){
                  username = value;
                },
              )),
              addItem(label: "卡号", child: TextField(
                controller: _usernameController,
                keyboardType: TextInputType.number,
                style: TextStyle(
                    fontSize: ScreenUtil().setWidth(13),
                    height: 1
                ),
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.symmetric(
                      vertical: 0,
                      horizontal: 0
                  ),
                  hintText: "请输入银行卡号",
                  hintStyle: TextStyle(
                      color: Colors.grey
                  ),

                  border: const OutlineInputBorder(
                    borderSide: BorderSide.none, // 这将移除边框 // 可选：设置圆角
                  ),
                  // 如果你希望聚焦时和未聚焦时都没有边框，也可以设置 focusedBorder 和 enabledBorder
                  focusedBorder: const OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.all(Radius.circular(4.0)),
                  ),
                  enabledBorder: const OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.all(Radius.circular(4.0)),
                  ),
                ),
                onChanged: (value){
                  username = value;
                },
              ), iconName: Icons.camera_alt_outlined),
              addItem(label: "所属银行", child: Text(
                "请选择所属银行",
                style: TextStyle(
                  fontSize: 13.w,
                  color: Colors.grey
                ),
              ), iconName: Icons.keyboard_arrow_right).onTap((){

                showModalBottomSheet(
                    context: Get.context!,
                    builder: (BuildContext context) {
                      return Container(
                        height: 357.w,
                        color: Colors.white,
                        child: Column(
                          children: [
                            Container(
                              height: 37.w,
                              color: const Color.fromRGBO(247, 247, 247, 1),
                              padding: EdgeInsetsGeometry.symmetric(
                                  horizontal: 16.w
                              ),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    "取消",
                                    style: TextStyle(
                                        fontSize: 14.w,
                                        color: const Color.fromRGBO(153, 153, 153, 1)
                                    ),
                                  ).onTap((){
                                    Navigator.pop(context);
                                  }),
                                  Text(
                                    "选择所属银行",
                                    style: TextStyle(
                                        fontSize: 14.w,
                                        fontWeight: FontWeight.w500
                                    ),
                                  ),
                                  Text(
                                    "确定",
                                    style: TextStyle(
                                        fontSize: 14.w,
                                        color: const Color.fromRGBO(238, 129, 27, 1)
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            Expanded(
                              child: CupertinoPicker(
                                itemExtent: 60.w,
                                onSelectedItemChanged: (int value) {
                                  print(value);
                                },
                                children: [
                                  ...bankList.map((e){
                                    return Center(
                                      child: Text(
                                        e,
                                        style: TextStyle(
                                          fontSize: 14.w,
                                          fontWeight: FontWeight.w500
                                        ),
                                      ),
                                    );
                                  }), 
                                ],
                              ),
                            )
                          ],
                        ),
                      );
                    }
                );
              }),
              addItem(label: "开户行", child: Text(
                "请选择开户支行",
                style: TextStyle(
                    fontSize: 13.w,
                    color: Colors.grey
                ),
              ), iconName: Icons.keyboard_arrow_right),
              SizedBox(height: 40.w,),
              Container(
                width: 255.w,
                height: 42.w,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(42.w)),
                  color: const Color.fromRGBO(117, 98, 249, 1)
                ),
                child: Center(
                  child: Text(
                    "确认添加",
                    style: TextStyle(
                      fontSize: 14.w,
                      color: Colors.white,
                      fontWeight: FontWeight.w500
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget addItem({required String label, required Widget child, IconData? iconName}){
    return Container(
      height: 44.w,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            width: 1,
            color: const Color.fromRGBO(238, 238, 238, 1)
          )
        )
      ),
      child: Row(
        children: [
          SizedBox(
            width: 66.w,
            child: Text(
              label,
              style: TextStyle(
                  fontSize: 14.w,
                  fontWeight: FontWeight.w500
              ),
            ),
          ),
          Expanded(
              child: child
          ),
          if(iconName != null) Icon(
            iconName,
            size: 20.w,
            color: const Color.fromRGBO(153, 153, 153, 1),
          )
        ],
      ),
    );
  }
}