Скользящая анимация внизу во флаттере

Question

У меня есть точечный индикатор внизу страницы.Мне нужно скрыть это после 5 секунд скольжения вниз.При переходе пользователя на другую страницу показываются точки, скользящие вверх и, наконец, через 5 секунд снова скрываются.Теперь точки исчезают через 5 секунд после затухания, но мне нужна другая анимация.

import 'package:flutter/material.dart';
import 'package:iGota/screens/partials/dots_indicator.dart';
import 'package:iGota/screens/posts_page.dart';
import 'package:iGota/screens/maps_page.dart';

class HomePage extends StatefulWidget {
  static String tag = 'home-page';

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

class _MyHomePageState extends State<HomePage> {
  final _controller = new PageController();
  static const _kDuration = const Duration(milliseconds: 300);
  static const _kCurve = Curves.ease;
  final _kArrowColor = Colors.black.withOpacity(0.8);
  bool _visible = true;

  void initState() {
    super.initState();
    Future.delayed(Duration(milliseconds: 5)).then((_) => _visible = !_visible);
  }

  @override
  Widget build(BuildContext context) {
    final List<Widget> _pages = <Widget>[
      new ConstrainedBox(
        constraints: const BoxConstraints.expand(),
        child: new FlatButton(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FlatButton(
                onPressed: () {
                  Navigator.pushNamed(context, PostsPage.tag);
                },
                child: Column(
                  children: <Widget>[
                    IconButton(
                      icon:
                          Icon(Icons.save_alt, color: Colors.white, size: 30.0),
                      onPressed: () {
                        Navigator.pushNamed(context, PostsPage.tag);
                      },
                    ),
                    Text(
                      "Contenedores",
                      style: TextStyle(color: Colors.white, fontSize: 20.0),
                    )
                  ],
                ),
              ),
            ],
          ),
          splashColor: Colors.white,
          color: Colors.blue[300],
          onPressed: () {
            Navigator.pushNamed(context, PostsPage.tag);
          },
        ),
      ),
      new ConstrainedBox(
        constraints: const BoxConstraints.expand(),
        child: new FlatButton(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FlatButton(
                onPressed: () {
                  Navigator.pushNamed(context, MapsPage.tag);
                },
                child: Column(
                  children: <Widget>[
                    IconButton(
                      icon: Icon(Icons.bubble_chart,
                          color: Colors.white, size: 30.0),
                      onPressed: () {
                        Navigator.pushNamed(context, MapsPage.tag);
                      },
                    ),
                    Text(
                      "Válvulas",
                      style: TextStyle(color: Colors.white, fontSize: 20.0),
                    )
                  ],
                ),
              ),
            ],
          ),
          splashColor: Colors.white,
          color: Colors.red[300],
          onPressed: () {
            Navigator.pushNamed(context, MapsPage.tag);
          },
        ),
      ),
    ];

    return new Scaffold(
      body: new IconTheme(
        data: new IconThemeData(color: _kArrowColor),
        child: new Stack(
          children: <Widget>[
            new PageView.builder(
              physics: new AlwaysScrollableScrollPhysics(),
              controller: _controller,
              itemCount: _pages.length,
              itemBuilder: (BuildContext context, int index) {
                this._visible=true;
                return _pages[index % _pages.length];
              },
            ),
            new Positioned(
              bottom: 0.0,
              left: 0.0,
              right: 0.0,
              child: AnimatedOpacity(
                opacity: _visible ? 1.0 : 0.0,
                duration: Duration(milliseconds: 3000),               
                child: new Container(       
                  color: Colors.grey[800].withOpacity(0.5),
                  padding: const EdgeInsets.all(20.0),
                  child: new Center(
                    child: new DotsIndicator(
                      controller: _controller,
                      itemCount: _pages.length,
                      onPageSelected: (int page) {
                        _controller.animateToPage(
                          page,
                          duration: _kDuration,
                          curve: _kCurve,
                        );
                      },
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Я думаю, изменение позиции поможет мне, но я не знаю точно, как я могудобавить в мой код без переписывания.Кто-нибудь может мне помочь?

ОБНОВЛЕНИЕ

import 'package:flutter/material.dart';
import 'package:iGota/screens/partials/dots_indicator.dart';
import 'package:iGota/screens/posts_page.dart';
import 'package:iGota/screens/maps_page.dart';

class HomePage extends StatefulWidget {
  static String tag = 'home-page';

  @override
  HomePageState createState() => new HomePageState();
}

class HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  final _controller = new PageController();
  static const _kDuration = const Duration(milliseconds: 300);
  static const _kCurve = Curves.ease;
  final _kArrowColor = Colors.black.withOpacity(0.8);
  AnimationController controller;
  Animation<Offset> offset;

  @override
  void initState() {
    super.initState();

    controller =AnimationController(vsync: this, duration: Duration(seconds: 1));
    Future.delayed(Duration(seconds: 5)).then((_) => controller.forward());

    offset = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, 1.0))
        .animate(controller);
  }

  @override
  Widget build(BuildContext context) {
    GestureDetector(onTap: () {
      setState(() {
        controller.reverse();
      });
    });
    final List<Widget> _pages = <Widget>[
      new ConstrainedBox(
        constraints: const BoxConstraints.expand(),
        child: new FlatButton(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FlatButton(
                onPressed: () {
                  Navigator.pushNamed(context, PostsPage.tag);
                },
                child: Column(
                  children: <Widget>[
                    IconButton(
                      icon:
                          Icon(Icons.save_alt, color: Colors.white, size: 30.0),
                      onPressed: () {
                        Navigator.pushNamed(context, PostsPage.tag);
                      },
                    ),
                    Text(
                      "Contenedores",
                      style: TextStyle(color: Colors.white, fontSize: 20.0),
                    )
                  ],
                ),
              ),
            ],
          ),
          splashColor: Colors.white,
          color: Colors.blue[300],
          onPressed: () {
            Navigator.pushNamed(context, PostsPage.tag);
          },
        ),
      ),
      new ConstrainedBox(
        constraints: const BoxConstraints.expand(),
        child: new FlatButton(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FlatButton(
                onPressed: () {
                  Navigator.pushNamed(context, MapsPage.tag);
                },
                child: Column(
                  children: <Widget>[
                    IconButton(
                      icon: Icon(Icons.bubble_chart,
                          color: Colors.white, size: 30.0),
                      onPressed: () {
                        Navigator.pushNamed(context, MapsPage.tag);
                      },
                    ),
                    Text(
                      "Válvulas",
                      style: TextStyle(color: Colors.white, fontSize: 20.0),
                    )
                  ],
                ),
              ),
            ],
          ),
          splashColor: Colors.white,
          color: Colors.red[300],
          onPressed: () {
            Navigator.pushNamed(context, MapsPage.tag);
          },
        ),
      ),
    ];

    return new Scaffold(
      body: new IconTheme(
        data: new IconThemeData(color: _kArrowColor),
        child: new Stack(
          children: <Widget>[
            new PageView.builder(
              physics: new AlwaysScrollableScrollPhysics(),
              controller: _controller,
              itemCount: _pages.length,
              itemBuilder: (BuildContext context, int index) {
                return _pages[index % _pages.length];
              },
            ),
            new Positioned(
              bottom: 0.0,
              left: 0.0,
              right: 0.0,
              child: SlideTransition(
                position: offset,
                child: new Container(
                  color: Colors.grey[800].withOpacity(0.5),
                  padding: const EdgeInsets.all(20.0),
                  child: new Center(
                    child: new DotsIndicator(
                      controller: _controller,
                      itemCount: _pages.length,
                      onPageSelected: (int page) {
                        _controller.animateToPage(
                          page,
                          duration: _kDuration,
                          curve: _kCurve,
                        );
                      },
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Теперь мне нужно позвонить controller.reverse , когда пользователь сенсорный экран ...

Answer 1

Чтобы создать скользящую анимацию для вашего индикатора (если я правильно понял ваше требование), я бы просто предложил использовать виджет SlideTransition .Для его интеграции в существующий код не требуется большой работы.

Приведенный ниже код демонстрирует минимальный пример SlideTransition.Если вы хотите продолжать отображать его во время навигации с одного экрана на другой, вам нужно нарисовать его в слое над вашего навигатора.

Если вы не любите использовать Stack, вместо этого вы можете использовать Overlay функциональность флаттера, как указано в этом ответе .Это также решило бы проблему с сохранением анимации, отображаемой во время навигационного перехода.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => HomeState();
}

class HomeState extends State<Home> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<Offset> offset;

  @override
  void initState() {
    super.initState();

    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1));

    offset = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, 1.0))
        .animate(controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Center(
            child: RaisedButton(
              child: Text('Show / Hide'),
              onPressed: () {
                switch (controller.status) {
                  case AnimationStatus.completed:
                    controller.reverse();
                    break;
                  case AnimationStatus.dismissed:
                    controller.forward();
                    break;
                  default:
                }
              },
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: SlideTransition(
              position: offset,
              child: Padding(
                padding: EdgeInsets.all(50.0),
                child: CircularProgressIndicator(),
              ),
            ),
          )
        ],
      ),
    );
  }
}