앱 개발 공부방

Flutter-AnimatedOpacity 본문

FLUTTER

Flutter-AnimatedOpacity

춘행이 2020. 10. 23. 20:11
728x90
AnimatedOpacity

Opacity는 투명도로 애니메이션으로 투명도를 조절하는 것입니다

import 'package:flutter/material.dart';

class MyAnimatedOpacity extends StatefulWidget {
  @override
  _MyAnimatedOpacityState createState() => _MyAnimatedOpacityState();
}

class _MyAnimatedOpacityState extends State<MyAnimatedOpacity> {
  bool _visible=true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedOpacity'),
      ),
      body:Center(
        child: AnimatedOpacity(opacity: _visible ? 1.0 : 0.0,
        duration: Duration(milliseconds: 500),
        child: Container(
          width: 200,
          height: 200,
          color: Colors.green,
        ),
      ),
      ),
      floatingActionButton:
      FloatingActionButton(child: Icon(Icons.play_arrow),onPressed: (){
        setState(() {
          _visible=!_visible;
        });
      }),
    );
  }
}

위 코드처럼 치시고 실행하고 버튼클릭시 투명해졌다가 다시 누르면 다시 보이는 걸 볼 수 있습니다.

728x90

'FLUTTER' 카테고리의 다른 글

Flutter-TabBar  (0) 2020.10.31
Flutter-Drawer  (0) 2020.10.25
Flutter-AnimatedContainer  (0) 2020.10.23
Flutter-BottomNavigationBar  (0) 2020.10.23
Flutter-Column , text에 int형 넣기  (0) 2020.10.21
Comments