Рецепт кода Flutter для виджета AnimatedOpacity

Виджет AnimatedOpacity используется для плавного перехода от одного элемента пользовательского интерфейса к другому.

Рецепт: Добейтесь плавной анимации при переходе от одного элемента пользовательского интерфейса к другому.

Виджет фокуса: AnimatedOpacity

Цель: Появление и исчезновение синего прямоугольника по нажатию кнопки. Интерфейс очень простой и будет выглядеть так:

Синий прямоугольник анимируется при нажатии кнопки: Alt Blue Rectangle анимируется при нажатии кнопки

Оформить заказ AnimatedOpacity анимация

Поехали!

Нам нужны три вещи, чтобы достичь нашей цели — анимации синего прямоугольника.

  1. Виджет для анимации: синий прямоугольник
    Container(
        width: 100,
        height: 150,
        color: Colors.blue,
    );
  1. StatefulWidget: способ сохранить состояние видимости прямоугольника.StatefulWidget имеет State объект, который может хранить и обновлять некоторые данные для приложения. State объекты setState метод помогает перестроить виджет, отражающий обновленное состояние данных приложения.
class AnimatedOpacityRecipe extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _AnimatedOpacityRecipeState();
}

Объект State будет иметь флаг о состоянии видимости прямоугольного виджета. _visible._visible к true означает, что прямоугольник виден или наоборот.

class _AnimatedOpacityRecipeState extends State<AnimatedOpacityRecipe> {
  bool _visible = true;
  
} 

Метод animatedOpacityWidget возвращает виджет AnimatedOpacity.duration свойство — управлять скоростью анимации. В этом примере для исчезновения прямоугольника требуется 900 миллисекунд. Это важно, чтобы показать плавный переход.

Widget animatedOpacityWidget() {
    return AnimatedOpacity(
      duration: Duration(milliseconds: 900),
      opacity: _visible ? 1 : 0,
      child: _blueRectangle(),
    );
  }
  1. Виджет OutlineButton: кнопка для включения/выключения прямоугольника. Кнопка с надписью «Анимация» для плавного появления/исчезновения прямоугольника.setState() метод переключает флаг видимости для прямоугольного виджета. Это заставляет Flutter перестраиваться AnimatedOpacity виджет в соответствии с новым значением _visible флаг.
...
OutlineButton(
  shape: new RoundedRectangleBorder(
    borderRadius: new BorderRadius.circular(8.0),
  ),
  child: Text("Press to Animate"),
  onPressed: () {
    setState(() => _visible = !_visible);
  },
)
...

Полный пример кода

import 'package:flutter/material.dart';

//starting the app
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Cookbook',
      theme: ThemeData(
        // This is the theme of your application.
        primarySwatch: Colors.green,
      ),
      home: AnimatedOpacityRecipe(title: 'AnimatedOpacity Demo'),
    );
  }
}

class AnimatedOpacityRecipe extends StatefulWidget {
  final String title;

  AnimatedOpacityRecipe({Key key, this.title}) : super(key: key);
  @override
  State<StatefulWidget> createState() => _AnimatedOpacityRecipeState();
}

class _AnimatedOpacityRecipeState extends State<AnimatedOpacityRecipe> {
  bool _visible = true;

  Widget _blueRectangle() {
    return Container(
      width: 100,
      height: 150,
      color: Colors.blue,
    );
  }

  Widget animatedOpacityWidget() {
    return AnimatedOpacity(
      duration: Duration(milliseconds: 900),
      opacity: _visible ? 1 : 0,
      child: _blueRectangle(),
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text(widget.title),
      ),
      body: buildDemoComponent(context),
    );
  }

  Widget buildDemoComponent(BuildContext context) {
    return Material(
      child: Padding(
        padding: EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              child: Text(
                  'Press button to see blue rectangle fade out and in'
              ),
              padding: EdgeInsets.all(20.0),
            ),
            animatedOpacityWidget(),
            OutlineButton(
              shape: new RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(8.0),
              ),
              child: Text("Press to Animate"),
              onPressed: () {
                //Toggles visibility of the rectangle
                setState(() => _visible = !_visible);
              },
            )
          ],
        ),
      ),
    );
  }
}

Репозиторий исходного кода: Исходный код рецепта доступен здесь

Использованная литература:

Понравилась статья? Пожалуйста, дайте мне знать в комментариях ниже, какие еще темы вы хотели бы, чтобы я написал.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *