Flutter UI组件库插件sunrise_ui的使用

Flutter UI组件库插件sunrise_ui的使用

Sunrise_UI 是一个轻量级库，旨在简化简单用户界面组件的开发过程。通过专注于简洁性和高效性，Sunrise_UI 提供了一系列易于使用的组件，帮助开发者快速创建干净且直观的界面。无论你是开发网页还是移动应用，Sunrise_UI 都能帮助你轻松集成按钮、输入字段和导航栏等基本UI元素，从而提升项目的用户体验并加速开发流程。

特性

• TextField 日历: 轻松地将交互式日历集成到表单中。用户可以快速方便地选择日期。
• TextField 选择器: 这个组件允许用户从预定义的列表中选择选项。它使得用户能够快速从多个选项中进行选择。
• 更多功能即将推出: 我们会不断扩展这个库，添加各种新组件，使你能创建更丰富、更动态的用户界面。敬请期待新的功能更新！

完整示例Demo

下面是一个完整的示例代码，展示如何在Flutter项目中使用 sunrise_ui 插件。

import 'package:flutter/material.dart';
import 'package:sunrise_ui/sunrise_ui.dart'; // 导入sunrise_ui包

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sunrise UI Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime? selectedDate; // 用于存储选中的日期
  String selectedOption = "选项1"; // 用于存储选中的选项

  // 打开日期选择器
  Future<void> _selectDate(BuildContext context) async {
    final DateTime? picked = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2015, 8),
      lastDate: DateTime(2101),
    );
    if (picked != null && picked != selectedDate) {
      setState(() {
        selectedDate = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sunrise UI Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 使用TextField Calendar组件
            TextFieldCalendar(
              onDateSelected: (DateTime date) {
                setState(() {
                  selectedDate = date;
                });
              },
              initialDate: selectedDate ?? DateTime.now(),
            ),
            SizedBox(height: 20), // 添加一些间距
            // 使用TextField Selector组件
            TextFieldSelector(
              items: ["选项1", "选项2", "选项3"],
              onChanged: (String value) {
                setState(() {
                  selectedOption = value;
                });
              },
              selectedItem: selectedOption,
            ),
            SizedBox(height: 20), // 添加一些间距
            // 显示选中的日期和选项
            Text("选中的日期: ${selectedDate?.toString() ?? "未选择"}"),
            Text("选中的选项: $selectedOption"),
          ],
        ),
      ),
    );
  }
}

说明

1. 导入库:

   import 'package:sunrise_ui/sunrise_ui.dart';
   

   确保你已经在 pubspec.yaml 文件中添加了 sunrise_ui 依赖。

2. 使用 TextFieldCalendar 组件:

   TextFieldCalendar(
     onDateSelected: (DateTime date) {
       setState(() {
         selectedDate = date;
       });
     },
     initialDate: selectedDate ?? DateTime.now(),
   )
   

   这个组件允许用户选择日期，并将其传递给回调函数。

3. 使用 TextFieldSelector 组件:

   TextFieldSelector(
     items: ["选项1", "选项2", "选项3"],
     onChanged: (String value) {
       setState(() {
         selectedOption = value;
       });
     },
     selectedItem: selectedOption,
   )