[Flutter/Project](Instagram Clone) FadeTransition() 화면 전환 애니메이션

 

---

---

소스코드 및 pubspec.yaml

// auth_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_project_IJ/widgets/fade_stack.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  // index
  int selectedForm = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            FadeStack(
              selectedForm: selectedForm,
            ),
            Container(
              child: FlatButton(
                child: Text('go to sign up'),
                onPressed: () {
                  setState(() {
                    if (selectedForm == 0)
                      selectedForm = 1;
                    else
                      selectedForm = 0;
                  });
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

// widgets/fade_stack.dart

import 'package:flutter/material.dart';
import 'package:flutter_project_IJ/screens/profile_screen.dart';
import 'package:flutter_project_IJ/widgets/sign_in_form.dart';
import 'package:flutter_project_IJ/widgets/sign_up_form.dart';

class FadeStack extends StatefulWidget {
  // selectedForm을 받아옴.
  final int selectedForm;

  const FadeStack({Key key, this.selectedForm}) : super(key: key);

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

class _FadeStackState extends State<FadeStack>
    with SingleTickerProviderStateMixin /* AnimationController를 사용하기 위해 필요 */ {
  List<Widget> forms = [SignUpForm(), SignInForm()];
  AnimationController _animationController;

  @override
  void initState() {
    _animationController = AnimationController(vsync: this, duration: duration);

    // 애니메이션을 한 번 실행해 주어야 빈화면이 나오지 않음.
    _animationController.forward();
    super.initState();
  }

  @override
  void didUpdateWidget(covariant FadeStack oldWidget) {
    // 바뀐 위젯과 이전의 위젯을 비교.
    if (widget.selectedForm != oldWidget.selectedForm)
      // from: 0.0 을 적용해줘야 애니메이션이 작동한다
      _animationController.forward(from: 0.0);
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      // AnimationController 필요.
      opacity: _animationController,
      child: IndexedStack(
        index: widget.selectedForm,
        children: forms,
      ),
    );
  }
}