Flutterの今週のWidgetをやってみた その1 Opacity

こんにちは、株式会社PentagonでFlutterを使ったアプリ開発をしているd-ariakeです。

今日は「Flutter Widget of the Week」という動画でOpacityについて学んでみたのでまとめてみます!
動画によると、不透明度を変えたい子WidgetをOpacityというWidgetで包んであげれば、指定した不透明度で表示させることができるらしいです。不透明度はopacityパラメタに0.0から1.0の範囲で渡すようです。
↓ 私も今回勉強した知識を使って簡単なサンプルを作ってみました!

import 'dart:math';
import 'package:flutter/material.dart';
void main() {
 runApp(
   MaterialApp(
     title: 'TestApp',
     theme: ThemeData(primarySwatch: Colors.blue),
     home: MyPage(),
   ),
 );
}
/// 参考: https://youtu.be/9hltevOHQBw
class MyPage extends StatefulWidget {
 @override
 State<StatefulWidget> createState() => MyPageState();
}
class MyPageState extends State<MyPage> {
 final random = Random();
 double opacity = 1.0;
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: const Text('TestApp')),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           Opacity(
             opacity: opacity,
             child: const FlutterLogo(size: 64),
           ),
           Text('現在の不透明度: $opacity'),
           ElevatedButton(
             onPressed: () {
               setState(() {
                 opacity = random.nextDouble().clamp(0, 1).toDouble();
               });
             },
             child: const Text('不透明度を変更!'),
           ),
         ],
       ),
     ),
   );
 }
}​

ボタンを押すとランダムな不透明度でFlutterのロゴが表示されるようになる簡単なサンプルです!みなさんも是非Opacityを使ってみてください!