BottomSheet结合Picker选择器

import 'package:flutter/material.dart';
import 'package:flutter_picker_plus/flutter_picker_plus.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: BottomSheetPickerDemo(),
    );
  }
}

class BottomSheetPickerDemo extends StatefulWidget {
  const BottomSheetPickerDemo({super.key});
  @override
  State<BottomSheetPickerDemo> createState() => _BottomSheetPickerDemoState();
}

class _BottomSheetPickerDemoState extends State<BottomSheetPickerDemo> {
  String _result = "未选择";

  void _showPickerBottomSheet() async {
    // 构建 Picker
    final picker = Picker(
      adapter: PickerDataAdapter<String>(
        pickerData: ["苹果", "香蕉", "橙子", "葡萄", "西瓜"],
      ),
      itemExtent: 40,
      cancelText: "取消",
      confirmText: "确认",
      onConfirm: (picker, selected) {
        final values = picker.getSelectedValues();
        if (values.isNotEmpty) {
          setState(() {
            _result = values.first;
          });
        }
      },
    );

    // 用 showModalBottomSheet 包裹 Picker
    await showModalBottomSheet(
      context: context,
      barrierColor: Colors.black54,
      backgroundColor: Colors.transparent, // 外层透明,自己加圆角
      builder: (context) {
        return Container(
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
            boxShadow: [BoxShadow(color: Colors.black26, blurRadius: 8)],
          ),
          height: 300,
          child: picker.makePicker(),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Picker BottomSheet Demo")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("选择结果:$_result", style: const TextStyle(fontSize: 18)),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _showPickerBottomSheet,
              child: const Text("打开 Picker BottomSheet"),
            ),
          ],
        ),
      ),
    );
  }
}
  • 上面代码中调用showModalBottomSheet,打开底部弹窗。
  • Picker 自己其实封装了关闭逻辑
  • 确认按钮confirmText):点击时会先执行 onConfirm 回调,然后调用 Navigator.of(context).pop() 把 Picker 弹窗关掉。
  • 取消按钮cancelText):点击时会调用 Navigator.of(context).pop() 直接关闭。

×

喜欢就点赞,疼爱就打赏