【Flutter】Opacityの使い方｜透明度を調整する

2023年1月3日2023年1月13日

こんにちは、フラメルです。

今回は任意のウィジェットの透明度を調整できるOpacityの使い方を紹介します。

任意のウィジェットの透明度を調整する方法

透明度を調整したいウィジェットをOpacityでラップし、opacityで透明度を調整できます’。

opacity:0.0で透明、opacity:0.5で半透明、opacity:1で不透明となります。

Opacity(
  opacity: 0.5,
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
),

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: Center(
          child: Opacity(
            opacity: 0.5,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

以上です。

合わせて読みたい

あわせて読みたい

【Flutter】Rowの使い方｜水平に複数のウィジェットを並べる Rowの基本的な使い方について解説します。Rowを使用することで複数のウィジェットを水平に並べられます。また並んでいるウィジェットの配置を指定したり、逆順にしたりなどできます。

あわせて読みたい

【Flutter】MainAxisAlignmentの使い方｜配置の種類一覧今回はColumnやRowなどで使用されるMainAxisAlignmentの使い方と種類について紹介します。【MainAxisAlignmentとは？】 MainAxisAlignmentを使用することでColumnなら…

あわせて読みたい

【Flutter】CrossAxisAlignment｜配置の種類一覧こんにちは、フラメルです。今回はColumnやRowなどで使用されるCrossAxisAlignmentの使い方と種類について紹介します。【CrossAxisAlignmentとは？】 CrossAxisAlignm…

あわせて読みたい

【Flutter】crossAxisAlignmentが効かない時の対処法こんにちは、フラメルです。今回はColumnやRowなどでcrossAxisAlignmentが効かない時の対処法を紹介します。【対処法：クロス軸の横幅をいっぱいにする】 SizedBoxあ…