CODEWITHSUNDEEP
textdartflutter
user3217522
user3217522

Reputation: 6294

Implementing a TextSwitcher on Flutter

I haven't found any TextSwitcher on Flutter. On Android, a TextSwitcher switches texts with an added fade out/fade in animation. Is there an implementation of that on Flutter? Do I need to do it from scratch? If so, how would you implement it?

Here's a reference: https://developer.android.com/reference/android/widget/TextSwitcher.html

Upvotes: 1

Views: 434

Answers (1)

Collin Jackson
Collin Jackson

Reputation: 116738

Flutter's PageView class provides roughly the same functionality as an Android TextSwitcher.

screenshot

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(),
      ),
    );
  }
}

Upvotes: 1

Related Questions