Как сделать собственную анимацию в качестве индикатора прогресса / загрузки Flutter? - PullRequest
Новая
       0

Как сделать собственную анимацию в качестве индикатора прогресса / загрузки Flutter?

0 голосов
/ 01 апреля 2020

Я пытаюсь заменить CircularProgressIndicator по умолчанию своей собственной анимацией. Я создал вращающийся виджет на основе приведенного здесь примера Как повернуть изображение с помощью Flutter AnimationController и Transform? , но при замене CircularProgressIndicator на «MyIconSpinner» по какой-то причине оно не появляется. Любые советы, пожалуйста? Вот содержимое MyIconSpinner 

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

class MyIconSpinner extends StatefulWidget {
  MyIconSpinner({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyIconSpinnerState createState() => _MyIconSpinnerState();
}

class _MyIconSpinnerState extends State<MyIconSpinner>
    with TickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(milliseconds: 5000),
      vsync: this,
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    _controller.forward();

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RotationTransition(
              turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
              child: Icon(
                Icons.star,
                size: 40,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Я помещаю его в виджет, подобный этому 

return Scaffold(
    appBar: AppBar(
      title: Text("Appbar"),
      backgroundColor: Colors.black,
      automaticallyImplyLeading: false,
    ),
    body: Center(
        child: Column(children: <Widget>[
        StreamBuilder(
            stream: doSomething(withSomeData),
            builder: (BuildContext context,
                AsyncSnapshot<List<DocumentSnapshot>> asyncSnapshot) {
             if (!asyncSnapshot.hasData) return MyIconSpinner();

1 Ответ

1 голос
/ 01 апреля 2020

Я думаю, вы не должны обернуть MyIconSpinner в Scaffold. Вы должны задать MyIconSpinner параметр цвета, а также повторить анимацию после его завершения. Вот отредактированная версия MyIconSpinner. 

class MyIconSpinner extends StatefulWidget {
  MyIconSpinner({Key key, this.title, this.color = Colors.blue}) : super(key: key);

  final String title;
  final Color color; 

  @override
  _MyIconSpinnerState createState() => _MyIconSpinnerState();
}

class _MyIconSpinnerState extends State<MyIconSpinner>
    with TickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(milliseconds: 5000),
      vsync: this,
    );

    _controller.addListener((){
      if(_controller.isCompleted){
        _controller.repeat();
      }
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    _controller.forward();
    return RotationTransition(
      turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
      child: Icon(
        Icons.star,
        size: 40,
        color: widget.color,
      ),
    );
  }
}
...