Flutter日期时间标签插件flutter_date_time_label的使用

Flutter日期时间标签插件flutter_date_time_label的使用

flutter_date_time_label 是一个用于在 Flutter 应用程序中显示日期/时间标签的插件。它提供了多种不同的样式来展示日期和时间信息。

DateLabel001

展示效果 

DateLabel001(
  dateTime: DateTime.now(), // 当前时间
  showYear: true, // 是否显示年份
);

DateLabel002

展示效果 

DateLabel002(
  dateTime: DateTime.now(), // 当前时间
  showWeekday: true, // 是否显示星期几
);

DateLabel003

展示效果 

DateLabel003(
  dateTime: DateTime.now(), // 当前时间
  showWeekday: true, // 是否显示星期几
);

DateLabel004

展示效果 

DateLabel004(
  dateTime: DateTime.now(), // 当前时间
);

DateLabel005

展示效果 

DateLabel005(
  dateTime: DateTime.now(), // 当前时间
  showYear: true, // 是否显示年份
);

完整示例

以下是一个完整的示例，展示了如何在 Flutter 应用程序中使用 flutter_date_time_label 插件：

import 'package:flutter/material.dart';
import 'package:flutter_date_time_label/flutter_date_time_label.dart';
import 'package:intl/date_symbol_data_local.dart';

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

class ExampleApp extends StatelessWidget {
  const ExampleApp({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 ExamplePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
    initializeDateFormatting(); // 初始化日期格式化
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            DateLabel001(
              dateTime: DateTime.now(),
              showYear: true,
            ),
            const Divider(),
            DateLabel002(
              dateTime: DateTime.now(),
              showWeekday: true,
            ),
            const Divider(),
            DateLabel003(
              dateTime: DateTime.now(),
              showWeekday: true,
            ),
            const Divider(),
            DateLabel004(
              dateTime: DateTime.now(),
            ),
            const Divider(),
            DateLabel005(
              dateTime: DateTime.now(),
              showYear: true,
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter日期时间标签插件flutter_date_time_label的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter日期时间标签插件flutter_date_time_label的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用Flutter日期时间标签插件flutter_date_time_label的示例代码。这个插件主要用于根据日期时间自动生成相对时间标签（例如“刚刚”，“3分钟前”，“昨天”等）。

首先，确保你已经在pubspec.yaml文件中添加了依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_date_time_label: ^最新版本号  # 请替换为最新版本号

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

接下来，你可以在你的Flutter项目中使用这个插件。以下是一个完整的示例：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  DateTime _dateTime;

  @override
  void initState() {
    super.initState();
    // 设置一个示例日期时间
    _dateTime = DateTime.now().subtract(Duration(minutes: 5));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter DateTimeLabel Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DateTimeLabel(
              dateTime: _dateTime,
              // 配置自定义样式（可选）
              style: TextStyle(fontSize: 20, color: Colors.black),
              // 配置自定义格式化（可选）
              builder: (context, dateTime) {
                final relativeTime = DateTimeLabel.getRelativeTime(dateTime);
                return Text(relativeTime);
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 更新日期时间
                setState(() {
                  _dateTime = DateTime.now();
                });
              },
              child: Text('刷新时间'),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

  1. 依赖导入：在文件顶部导入了flutter_date_time_label包。
  2. 示例日期时间：在MyHomePage的状态类中，初始化了一个示例日期时间_dateTime，设置为当前时间减去5分钟。
  3. DateTimeLabel组件：
    • dateTime参数接受一个DateTime对象。
    • style参数允许你自定义文本的样式（可选）。
    • builder参数允许你自定义标签的生成逻辑（可选）。这里我们使用了插件内置的getRelativeTime方法来获取相对时间。
  4. 刷新按钮：点击按钮时，使用setState方法更新_dateTime为当前时间，从而刷新显示的时间标签。

这个示例展示了如何使用flutter_date_time_label插件来显示相对时间标签，并且提供了一个按钮来刷新显示的时间。你可以根据实际需求进一步定制和扩展这个示例。

回到顶部