flutter/lib/pages/chat/components/redpacket.dart

/// 发红包模板
library;

import 'package:flutter/material.dart';

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

	@override
	State<RedPacket> createState() => _RedPacketState();
}

class _RedPacketState extends State<RedPacket> {
  String amount = '0.00';

	@override
	Widget build(BuildContext context) {
		return Material(
      type: MaterialType.transparency,
      child: Column(
        children: [
          ListView(
            shrinkWrap: true,
            padding: const EdgeInsets.only(bottom: 50.0),
            children: [
              const SizedBox(height: 10.0),
              Container(
                margin: const EdgeInsets.symmetric(horizontal: 15.0),
                padding: const EdgeInsets.symmetric(horizontal: 10.0),
                decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(10.0),
                ),
                child: Row(
                  children: <Widget>[
                    const Text('红包个数'),
                    Expanded(
                      child: TextField(
                        textAlign: TextAlign.right,
                        decoration: const InputDecoration(
                          hintText: "填写个数",
                          isDense: true,
                          hintStyle: TextStyle(fontSize: 14.0),
                          border: OutlineInputBorder(borderSide: BorderSide.none)
                        ),
                        onChanged: (value) {},
                      ),
                    ),
                    const Text('个'),
                  ],
                ),
              ),
              const SizedBox(height: 10.0),
              Container(
                margin: const EdgeInsets.symmetric(horizontal: 15.0),
                padding: const EdgeInsets.symmetric(horizontal: 10.0),
                decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(10.0),
                ),
                child: Row(
                  children: <Widget>[
                    const Text('总金额'),
                    Expanded(
                      child: TextField(
                        keyboardType: const TextInputType.numberWithOptions(decimal: true),
                        textAlign: TextAlign.right,
                        decoration: const InputDecoration(
                          hintText: "￥0.00",
                          isDense: true,
                          hintStyle: TextStyle(fontSize: 14.0),
                          border: OutlineInputBorder(borderSide: BorderSide.none)
                        ),
                        onChanged: (value) {
                          setState(() {
                            amount = value != '' ? value : '0.00';
                          });
                        },
                      ),
                    ),
                    const Text('元'),
                  ],
                ),
              ),
              const SizedBox(height: 10.0),
              Container(
                margin: const EdgeInsets.symmetric(horizontal: 15.0),
                padding: const EdgeInsets.symmetric(horizontal: 10.0),
                decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(10.0),
                ),
                child: Row(
                  children: <Widget>[
                    const Text('留言'),
                    Expanded(
                      child: TextField(
                        maxLines: null,
                        keyboardType: TextInputType.multiline,
                        textAlign: TextAlign.right,
                        decoration: const InputDecoration(
                          hintText: "恭喜发财，大吉大利",
                          isDense: true,
                          hintStyle: TextStyle(fontSize: 14.0),
                          border: OutlineInputBorder(borderSide: BorderSide.none)
                        ),
                        onChanged: (value) {},
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 30.0),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Text('￥', style: TextStyle(fontSize: 24.0)), Text(amount, style: const TextStyle(fontSize: 36.0))
                ]
              ),
              const SizedBox(height: 20.0,),
              UnconstrainedBox(
                constrainedAxis: Axis.vertical,
                child: FilledButton(
                  style: ButtonStyle(
                    backgroundColor: WidgetStateProperty.all(Color(0xFFFF7F43)),
                    padding: WidgetStateProperty.all(EdgeInsets.zero),
                    minimumSize: WidgetStateProperty.all(const Size(180.0, 45.0)),
                    shape: WidgetStatePropertyAll(
                      RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0))
                    ),
                  ),
                  onPressed: () {},
                  child: const Text('塞钱进红包', style: TextStyle(fontSize: 16.0),),
                ),
              ),
              const SizedBox(height: 10.0,),
              const Align(
                alignment: Alignment.center,
                child: Text('未领取的红包，将于24小时后发起退款', style: TextStyle(color: Colors.grey, fontSize: 12.0),),
              ),
            ],
          ),
        ],
      ),
    );
	}
}