搜索插件、代码仓与 APP 分类

live_text 封面
插件详情v0.0.7

live_text

一个 Flutter 包,提供最简单的方式来更新 UI 中的文本控件。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
19
喜欢数
26
Pub 分数
140

安装插件

flutter pub add live_text

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

LiveText 是一个 Flutter 包,旨在简化 UI 中的动态文本更新。它能够以最少的代码实现实时、流畅的文本更改,非常适合用于动画、计数器或任何需要响应式文本渲染的场景。该包设计简洁易用,可无缝集成到所有主要平台,包括 Android、iOS、Web、macOS、Windows 和 Linux。该包专注于性能和简单性,是开发者寻求高效文本操作而无需复杂设置的理想选择。其轻量级特性确保了快速渲染和低开销。

适合场景

  • 实时计数器
  • 动画文本过渡
  • 动态标签更新
  • 交互式 UI 元素
  • 实时数据展示

主要特点

  • 简单 API
  • 跨平台支持
  • 平滑文本更新
  • 低内存使用
  • 最小化样板代码
  • 内置动画处理

适合对象

  • 初学者 Flutter 开发者
  • 动态文本的应用
  • 涉及文本的动画
  • 对性能敏感的应用程序
  • 快速用户界面优化

使用建议

  • 仅限文本更新
  • 不适用于复杂控件
  • 可能需要额外的样式
  • 适用于简单的文本场景
  • 无内置的文本格式化选项

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

Buy Me A Coffee

pub package

:star: Updating Text widget made simple :star:

Have you stumble upon a situations where you simply need to update UI text without dealing with state management techniques? If so, this package is a perfect fit for you.

Features

  • [X] Updates text without any hassle.
  • [X] Provides call back with old and new value of your text widget.
  • [X] Reset to initial value whenever you want.

Getting started

Add live_text to your pubspec.yaml file and start making your text live.

Installation

Just add live_text as a dependency in your pubspec.yaml file.

dependencies:
  live_text: <Latest Version>

Usage

  import 'package:live_text/live_text.dart';

Simple counter example.

  • Create LiveTextController instance
    LiveTextController counterLiveTextController = LiveTextController(initialValue: "0");
    
  • Create LiveText widget and provide LiveTextController that we just created
     LiveText(
                style: Theme.of(context).textTheme.headlineMedium,
                liveTextController: counterLiveTextController,
              ),
    
  • Now provide following call backs on increase and decrease button
      void _incrementCounter() {
    counterLiveTextController.setValue =
        (int.parse(counterLiveTextController.getValue) + 1).toString();
    }
    
     void _decrementCounter() {
      counterLiveTextController.setValue =
          (int.parse(counterLiveTextController.getValue) - 1).toString();
    }
    

Timer example.

  • Following is the full example code for Timer app using live_text
import 'dart:async';

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

class TimerExample extends StatelessWidget {
  TimerExample({super.key});

  late LiveTextController timerLiveTextController = LiveTextController(
      initialValue: "00:00",
      onValueChanged: (String oldValue, String newValue) {
        print("Timer");

        print("Old Value $oldValue");
        print("New Value $newValue");
      });

  Timer? timer;

  void _toggleTimer() {
    if (timer == null) {
      DateTime futureTime = DateTime.now().add(const Duration(seconds: 120));

      timer ??= Timer.periodic(const Duration(milliseconds: 100), (_) {
        DateTime latestTime = DateTime.now();
        if (latestTime.isBefore(futureTime)) {
          timerLiveTextController.setValue =
              formatHHMMSS(futureTime.difference(latestTime).inSeconds);
        } else {
          _clearTimer();
        }
      });
    } else {
      _clearTimer();
    }
  }

  void _clearTimer() {
    timer?.cancel();
    timer = null;
    timerLiveTextController.resetValue();
  }

  String formatHHMMSS(int seconds) {
    final hours = (seconds / 3600).truncate();
    seconds = (seconds % 3600).truncate();
    final minutes = (seconds / 60).truncate();

    final hoursStr = (hours).toString().padLeft(2, '0');
    final minutesStr = (minutes).toString().padLeft(2, '0');
    final secondsStr = (seconds % 60).toString().padLeft(2, '0');

    if (hours == 0) {
      return '$minutesStr:$secondsStr';
    }

    return '$hoursStr:$minutesStr:$secondsStr';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Timer"),
      ),
      body: SafeArea(
        child: Center(
          child: Column(
            children: <Widget>[
              const Spacer(),
              LiveText(
                style: Theme.of(context).textTheme.headlineLarge,
                liveTextController: timerLiveTextController,
              ),
              const Spacer(),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16.0),
                child: Row(
                  children: [
                    const Spacer(),
                    FloatingActionButton(
                      onPressed: _toggleTimer,
                      tooltip: 'Start Timer',
                      child: const Icon(Icons.timer_outlined),
                    ),
                    const SizedBox(width: 10),
                    FloatingActionButton(
                      onPressed: _clearTimer,
                      tooltip: 'Start Timer',
                      child: const Icon(Icons.timer_off_outlined),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Additional information

We will be more than happy for your contributions.
Please contribute to live_text this github repo.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。