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 Opacity で透過を実現しよう!!

Flutter Opacity で透過を実現しよう!!

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

Opacty

Opacity(
          opacity: check ? opacity = 0.5 : opacity = 1.0,
          child: Image.asset("tutenkaku.jpg"),
        ),

Opacity()にopacity: 投下したい数値を指定、child:で透過したい要素を指定する。

opacity: には「double」で 0.0 〜 1.0 までの値を指定する。

全体 (わかりやすい様に)AnimatedContainer()も使用。

AnimatedContainer()についてはこちらを参考にして下さい。

あんまりいけてないコードですが。。
floatingActionButtonでopacityの切り替えをしています。
今回、AnimatedContainerを使用したため@requireのduration: を書いてますが
意味ありません。。ただ、必須なので書いてるだけです。

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: AnimatedContainer(
        duration: Duration(seconds: 0),
        child: Opacity(
          opacity: check ? opacity = 0.5 : opacity = 1.0,
          child: Image.asset("tutenkaku.jpg"),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          check ? check = false : check = true;
        }),
      ),
    );
  }
}

動画

durationを使いたいなら AnimatedOpacity()

AnimatedOpacityはこちらから!!

Blog Flutter / Dart

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

Follow Me
よかったらシェアしてね!
  • URLをコピーしました!
  • Flutter Image.assetで画像を表示してみよう!!
  • Flutter AnimatedOpacity() でDurationをかけよう!!

関連記事

  • 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

© 芝池製作所.

目次