Рецепт кода Flutter для виджета AnimatedOpacity
Виджет AnimatedOpacity используется для плавного перехода от одного элемента пользовательского интерфейса к другому.
Рецепт: Добейтесь плавной анимации при переходе от одного элемента пользовательского интерфейса к другому.
Виджет фокуса: AnimatedOpacity
Цель: Появление и исчезновение синего прямоугольника по нажатию кнопки. Интерфейс очень простой и будет выглядеть так:
Синий прямоугольник анимируется при нажатии кнопки:
Оформить заказ AnimatedOpacity анимация
Поехали!
Нам нужны три вещи, чтобы достичь нашей цели — анимации синего прямоугольника.
- Виджет для анимации: синий прямоугольник
Container(
width: 100,
height: 150,
color: Colors.blue,
);
- 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(),
);
}
- Виджет 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);
},
)
],
),
),
);
}
}
Репозиторий исходного кода: Исходный код рецепта доступен здесь
Использованная литература:
Понравилась статья? Пожалуйста, дайте мне знать в комментариях ниже, какие еще темы вы хотели бы, чтобы я написал.