Flutter选择器插件masamune_picker的使用

在本指南中，我们将介绍如何使用masamune_picker插件来创建一个简单的选择器应用。该插件允许用户从不同的源（如文件系统、相册等）选择数据。

简介

masamune_picker 是一个用于 Flutter 应用的选择器插件。它提供了一个简单且强大的界面来让用户选择数据，如文件或图像。以下是一个完整的示例，展示如何使用该插件。

完整示例

示例代码

// Dart imports:
import 'dart:io';

// Flutter imports:
import 'package:flutter/material.dart';

// Package imports:
import 'package:masamune/masamune.dart';
import 'package:masamune_picker/masamune_picker.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MasamuneApp(
      home: const PickerPage(),
      title: "Flutter Demo",
      masamuneAdapters: const [PickerMasamuneAdapter()],
      theme: AppThemeData(
        primary: Colors.blue,
      ),
    );
  }
}

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

  @override
  State<StatefulWidget> createState() => PickerPageState();
}

class PickerPageState extends State<PickerPage> {
  final picker = Picker();
  PickerValue? _value;

  @override
  void initState() {
    super.initState();
    picker.addListener(_handledOnUpdate);
  }

  void _handledOnUpdate() {
    setState(() {});
  }

  @override
  void dispose() {
    super.dispose();
    picker.removeListener(_handledOnUpdate);
    picker.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("App Demo")),
      body: Center(
        child: _value == null
            ? const SizedBox.shrink()
            : Image.file(
                File(_value!.uri!.toString()),
                fit: BoxFit.cover,
              ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () async {
          _value = await picker.pickSingle();
        },
        label: const Text("Pick"),
        icon: const Icon(Icons.add_a_photo),
      ),
    );
  }
}

代码解析

导入必要的库

import 'dart:io'; // 导入 Dart 的 IO 库
import 'package:flutter/material.dart'; // 导入 Flutter 基础库
import 'package:masamune/masamune.dart'; // 导入 masamune 框架
import 'package:masamune_picker/masamune_picker.dart'; // 导入 masamune_picker 插件

定义主应用

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MasamuneApp(
      home: const PickerPage(), // 设置主页面为 PickerPage
      title: "Flutter Demo",
      masamuneAdapters: const [PickerMasamuneAdapter()], // 添加 PickerMasamuneAdapter 适配器
      theme: AppThemeData(
        primary: Colors.blue,
      ),
    );
  }
}

定义选择器页面

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

  @override
  State<StatefulWidget> createState() => PickerPageState();
}

class PickerPageState extends State<PickerPage> {
  final picker = Picker(); // 创建 Picker 实例
  PickerValue? _value; // 存储选择的值

  @override
  void initState() {
    super.initState();
    picker.addListener(_handledOnUpdate); // 添加监听器
  }

  void _handledOnUpdate() {
    setState(() {}); // 更新 UI
  }

  @override
  void dispose() {
    super.dispose();
    picker.removeListener(_handledOnUpdate); // 移除监听器
    picker.dispose(); // 释放资源
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("App Demo")), // 设置 AppBar
      body: Center(
        child: _value == null
            ? const SizedBox.shrink() // 如果没有选择值，则不显示任何东西
            : Image.file(
                File(_value!.uri!.toString()), // 显示选择的文件
                fit: BoxFit.cover,
              ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () async { // 按钮点击事件
          _value = await picker.pickSingle(); // 弹出选择器并获取选择结果
        },
        label: const Text("Pick"), // 按钮标签
        icon: const Icon(Icons.add_a_photo), // 按钮图标
      ),
    );
  }
}

更多关于Flutter选择器插件masamune_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

phonegap100 1楼•1 天前

更多关于Flutter选择器插件masamune_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用masamune_picker插件的示例代码。masamune_picker是一个功能强大的选择器插件，支持日期、时间、颜色等多种选择器。

步骤 1: 添加依赖

首先，在你的pubspec.yaml文件中添加masamune_picker依赖：

dependencies:
  flutter:
    sdk: flutter
  masamune_picker: ^latest_version # 请替换为最新的版本号

然后运行flutter pub get来安装依赖。

步骤 2: 导入包

在你的Dart文件中导入masamune_picker包：

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

步骤 3: 使用选择器

下面是一些常用的选择器的示例代码：

日期选择器

class DatePickerScreen extends StatefulWidget {
  @override
  _DatePickerScreenState createState() => _DatePickerScreenState();
}

class _DatePickerScreenState extends State<DatePickerScreen> {
  DateTime? selectedDate;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('日期选择器'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final DateTime? date = await showDatePickerPicker(
              context: context,
              initialDate: selectedDate ?? DateTime.now(),
              firstDate: DateTime(2000),
              lastDate: DateTime(2101),
            );
            if (date != null && date != selectedDate) {
              setState(() {
                selectedDate = date;
              });
            }
          },
          child: Text('选择日期'),
        ),
      ),
    );
  }
}

时间选择器

class TimePickerScreen extends StatefulWidget {
  @override
  _TimePickerScreenState createState() => _TimePickerScreenState();
}

class _TimePickerScreenState extends State<TimePickerScreen> {
  TimeOfDay? selectedTime;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('时间选择器'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final TimeOfDay? time = await showTimePickerPicker(
              context: context,
              initialTime: selectedTime ?? TimeOfDay.now(),
            );
            if (time != null && time != selectedTime) {
              setState(() {
                selectedTime = time;
              });
            }
          },
          child: Text('选择时间'),
        ),
      ),
    );
  }
}

颜色选择器

class ColorPickerScreen extends StatefulWidget {
  @override
  _ColorPickerScreenState createState() => _ColorPickerScreenState();
}

class _ColorPickerScreenState extends State<ColorPickerScreen> {
  Color selectedColor = Colors.black;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('颜色选择器'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 100,
              height: 100,
              color: selectedColor,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                final Color? color = await showColorPickerPicker(
                  context: context,
                  initialColor: selectedColor,
                );
                if (color != null && color != selectedColor) {
                  setState(() {
                    selectedColor = color!;
                  });
                }
              },
              child: Text('选择颜色'),
            ),
          ],
        ),
      ),
    );
  }
}

步骤 4: 运行应用

确保你已经创建了相应的路由来访问这些屏幕，例如使用Navigator.push来导航到这些选择器屏幕。

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('masamune_picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => DatePickerScreen()),
                );
              },
              child: Text('日期选择器'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => TimePickerScreen()),
                );
              },
              child: Text('时间选择器'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => ColorPickerScreen()),
                );
              },
              child: Text('颜色选择器'),
            ),
          ],
        ),
      ),
    ),
  ));
}

这段代码展示了如何在Flutter项目中使用masamune_picker插件来实现日期、时间和颜色选择器。你可以根据实际需求进一步定制这些选择器的行为。