MENU
  • About
  • Service
    • ホームページ製作
    • ノーコードアプリ開発
    • 業務自動化・効率化
    • Google Workspace
    • プログラミング学習サポート
    • セミナー講師
  • News
  • Blog
  • Contact
芝池製作所
  • About
  • Service
    • ホームページ製作
    • ノーコードアプリ開発
    • 業務自動化・効率化
    • Google Workspace
    • プログラミング学習サポート
    • セミナー講師
  • News
  • Blog
  • Contact
芝池製作所
  • About
  • Service
    • ホームページ製作
    • ノーコードアプリ開発
    • 業務自動化・効率化
    • Google Workspace
    • プログラミング学習サポート
    • セミナー講師
  • News
  • Blog
  • Contact
  1. ホーム
  2. Blog
  3. Flutter FadeTransition で FadeIn させる!!

Flutter FadeTransition で FadeIn させる!!

2023 7/20
Blog Flutter / Dart
2020年3月7日2023年7月20日
目次

MaterialApp home: に MyFadeIn()を書き込む

引数の「displayChild」を定義していきましょー

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyFadeIn(
        displayChild: Center(child: Text("ゆっくり出てくる〜")),
      ),
    );
  }
}

MyFadeIn を StatefullWidgetで作る。

class MyFadeIn extends StatefulWidget {
  final displayChild;
  // 引数に「displayChild」を必須にする
  MyFadeIn({@required this.displayChild});
  @override
  _MyFadeInState createState() => _MyFadeInState();
}

class _MyFadeInState extends State<MyFadeIn>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation animation;

  // Widgetが呼ばれるたびに生成
  @override
  void initState() {
    controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );

    animation = Tween(
      begin: 0.0,
      end: 1.0,
    ).animate(controller);
    super.initState();
  }

  // initstateが終わったら破棄
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // controllerの処理を初めてる
    controller.forward();
    return FadeTransition(opacity: animation, child: widget.displayChild);
  }
}

コード全部

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyFadeIn(
        displayChild: Center(child: Text("aaaaaaaaa")),
      ),
    );
  }
}

class MyFadeIn extends StatefulWidget {
  final displayChild;
  // 引数に「displayChild」を必須にする
  MyFadeIn({@required this.displayChild});
  @override
  _MyFadeInState createState() => _MyFadeInState();
}

class _MyFadeInState extends State<MyFadeIn>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation animation;

  // Widgetが呼ばれるたびに生成
  @override
  void initState() {
    controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );

    animation = Tween(
      begin: 0.0,
      end: 1.0,
    ).animate(controller);
    super.initState();
  }

  // initstateが終わったら破棄
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // controllerの処理を初めてる
    controller.forward();
    return FadeTransition(opacity: animation, child: widget.displayChild);
  }
}

動画

Blog Flutter / Dart

この記事が気に入ったら
いいね または フォローしてね!

Follow Me
よかったらシェアしてね!
  • URLをコピーしました!
  • Flutter FutureBuilder で「ロード中!!」を出してみる!!
  • Flutter PageView() でページごとにスクロール!

関連記事

  • AppSheetでMapにピンを立てる
    2023年9月9日
  • AppSheetで画像を表示
    2023年9月8日
  • Googleフォームで経費管理
    2023年9月6日
  • GAS(プログラム)で請求書が添付されたGmailを取得
    2023年9月3日
  • ホームページ製作 WordPressとノーコードの選択
    2023年8月14日
  • Google Workspaceで生産性向上?
    2023年8月14日
  • 生産性向上!なぜ「チャット」が業務効率化のカギなのか
    2023年8月13日
  • ホームページ デザインのトレンド
    2023年8月11日
Category
  • Anaconda
  • AppSheet
  • Blog
  • colaboratory
  • Flutter / Dart
  • Git
  • Google Workspace
  • GoogleAppsScript
  • HomePage
  • JavaScript
  • Laravel
  • News
  • Python
  • Selenium
  • SQL
  • TypeScript
  • wordpress
  • スプレッドシート
  • データベース
  • ノーコード
  • プログラミング
  • 生産性向上
Navigation
  • About
  • Service
    • ホームページ製作
    • ノーコードアプリ開発
    • 業務自動化・効率化
    • Google Workspace
    • プログラミング学習サポート
    • セミナー講師
  • News
  • Blog
  • Contact

© 芝池製作所.

目次