在 Flutter 上实现 TextSwitcher

Posted 2023-02-23

【中文标题】在 Flutter 上实现 TextSwitcher

【英文标题】：Implementing a TextSwitcher on Flutter

【发布时间】：2017-10-26 12:57:52

【问题描述】：

我没有在 Flutter 上找到任何 TextSwitcher。在 android 上，TextSwitcher 通过添加淡出/淡入动画切换文本。在 Flutter 上有实现吗？我需要从头开始吗？如果是这样，您将如何实施？

这是一个参考： https://developer.android.com/reference/android/widget/TextSwitcher.html

【参考方案1】：

Flutter 的 PageView 类提供与 Android TextSwitcher 大致相同的功能。

import 'dart:collection';
import 'package:flutter/scheduler.dart';
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_database/firebase_database.dart';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/foundation.dart';

void main() 
  runApp(new MyApp());


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


class MyHomePage extends StatefulWidget 
  @override
  State createState() => new MyHomePageState();


class MyHomePageState extends State<MyHomePage> 

  PageController _controller = new PageController();

  static const List<String> _kStrings = const <String>[
    'What is your name?',
    'I am a developer.',
    'What are you doing?',
    'Etc. etc...',
  ];

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Text Switcher Demo'),
      ),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.navigate_next),
        onPressed: () 
          Duration duration = const Duration(milliseconds: 300);
          Curve curve = Curves.easeOut;
          if (_controller.page == _kStrings.length - 1) 
            _controller.animateToPage(0, duration: duration, curve: curve);
           else 
            _controller.nextPage(duration: duration, curve: curve);
          
        ,
      ),
      body: new PageView(
        controller: _controller,
        children: _kStrings.map((text) 
          return new Center(
            child: new Text(
              text,
              textAlign: TextAlign.center,
              style: Theme.of(context).textTheme.display2
            ),
          );
        ).toList(),
      ),
    );
  

【讨论】：

太棒了！谢谢！