搜尋套件、儲存庫與 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.

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。