Flutter选择器插件dghub_picker的使用

DGHub Studio

Buy Me a Coffee

什么是dghub_picker？

dghub_picker 是一个简单的语言包。你可以通过查看 example 文件夹来了解其用法。

安装

在你的 pubspec.yaml 文件的 dependencies: 部分添加以下行：

dependencies:
  dghub_picker: <latest_version>

确保替换 <latest_version> 为你想要安装的确切版本号。

导入包

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

import 'package:dghub_picker/dghub_picker.dart';

使用示例

下面是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 dghub_picker 插件。

示例代码

example/lib/main.dart

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

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

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

  // 这个小部件是您的应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 货币选择器按钮
              DGHubCurrencyPickerButton(result: (r) {}),

              // 20像素间距
              SizedBox(height: 20),

              // 图标选择器按钮
              DGHubIconPickerButton(
                result: (r) {},
                title: '选择图标',
              ),

              // 20像素间距
              SizedBox(height: 20),

              // 单张图片选择器按钮
              DGHubImagePickerSingle(resultPath: (r) {}, resultBytes: (f) {}),

              // 20像素间距
              SizedBox(height: 20),

              // 颜色选择器按钮
              DGHubColorPickerButton(title: '选择背景颜色', result: (r) {})
            ],
          ),
        ),
      ),
    );
  }
}

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

htzhanglong 1楼

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

dghub_picker 是一个 Flutter 插件，用于提供多种选择器功能，例如日期选择器、时间选择器、颜色选择器等。这个插件可以帮助开发者快速集成各种选择器到 Flutter 应用中。

以下是如何使用 dghub_picker 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 dghub_picker 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  dghub_picker: ^1.0.0  # 使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你需要使用选择器的 Dart 文件中，导入 dghub_picker 插件：

import 'package:dghub_picker/dghub_picker.dart';

3. 使用选择器

dghub_picker 提供了多种选择器，以下是几个常见的使用示例：

日期选择器

void _selectDate(BuildContext context) async {
  DateTime? selectedDate = await DghubPicker.datePicker(
    context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2000),
    lastDate: DateTime(2100),
  );

  if (selectedDate != null) {
    print("Selected Date: $selectedDate");
  }
}

时间选择器

void _selectTime(BuildContext context) async {
  TimeOfDay? selectedTime = await DghubPicker.timePicker(
    context,
    initialTime: TimeOfDay.now(),
  );

  if (selectedTime != null) {
    print("Selected Time: ${selectedTime.format(context)}");
  }
}

颜色选择器

void _selectColor(BuildContext context) async {
  Color? selectedColor = await DghubPicker.colorPicker(
    context,
    initialColor: Colors.red,
  );

  if (selectedColor != null) {
    print("Selected Color: $selectedColor");
  }
}

4. 触发选择器

你可以在按钮的 onPressed 事件中调用上述方法来触发选择器：

ElevatedButton(
  onPressed: () => _selectDate(context),
  child: Text('Select Date'),
),

ElevatedButton(
  onPressed: () => _selectTime(context),
  child: Text('Select Time'),
),

ElevatedButton(
  onPressed: () => _selectColor(context),
  child: Text('Select Color'),
),

完整示例

以下是一个完整的示例，展示了如何使用 dghub_picker 插件的日期、时间和颜色选择器：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  void _selectDate(BuildContext context) async {
    DateTime? selectedDate = await DghubPicker.datePicker(
      context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
    );

    if (selectedDate != null) {
      print("Selected Date: $selectedDate");
    }
  }

  void _selectTime(BuildContext context) async {
    TimeOfDay? selectedTime = await DghubPicker.timePicker(
      context,
      initialTime: TimeOfDay.now(),
    );

    if (selectedTime != null) {
      print("Selected Time: ${selectedTime.format(context)}");
    }
  }

  void _selectColor(BuildContext context) async {
    Color? selectedColor = await DghubPicker.colorPicker(
      context,
      initialColor: Colors.red,
    );

    if (selectedColor != null) {
      print("Selected Color: $selectedColor");
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dghub Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => _selectDate(context),
              child: Text('Select Date'),
            ),
            ElevatedButton(
              onPressed: () => _selectTime(context),
              child: Text('Select Time'),
            ),
            ElevatedButton(
              onPressed: () => _selectColor(context),
              child: Text('Select Color'),
            ),
          ],
        ),
      ),
    );
  }
}