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 AnimatedOpacity() でDurationをかけよう!!

Flutter AnimatedOpacity() でDurationをかけよう!!

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

ほとんどAnimatedContainer使用したOpacityと同じですが

念のため、AnimatedContainerはこちらから

AnimatedOpacity コードの全容

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Animate(),
    );
  }
}

class Animate extends StatefulWidget {
  @override
  _AnimateState createState() => _AnimateState();
}

class _AnimateState extends State<Animate> {
  bool check = false;
  double opacity = 1.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Opacty'),
      ),
      body: AnimatedOpacity(
        duration: Duration(seconds: 2),
          opacity: check ? opacity = 0.0 : opacity = 1.0,
          child: Image.asset("tutenkaku.jpg"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          check ? check = false : check = true;
        }),
      ),
    );
  }
}

できるのか確認していませんが、このアクション後ページ遷移とかできたらちょっといい感じな様な気がしますね!!

また、そのうち確認しておきます!!

Blog Flutter / Dart

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

Follow Me
よかったらシェアしてね!
  • URLをコピーしました!
  • Flutter Opacity で透過を実現しよう!!
  • Flutter FutureBuilder で「ロード中!!」を出してみる!!

関連記事

  • 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

© 芝池製作所.

目次