世界最大級のオンライン学習サービス「Udemy」のセール状況はこちら

【Flutter】FlutterLogoの使い方|ロゴを表示させる

Flutterのウィジェット「FlutterLogo」の使い方を紹介します。

「FlutterLogo」を使えばFlutterのロゴを表示できます。

目次

FlutterLogoの使い方

「FlutterLogo」の「size」で指定したサイズのロゴが表示されます。

FlutterLogo(
  size: 200,
),

ロゴの見た目を変更する

style: FlutterLogoStyle.markOnly
style: FlutterLogoStyle.horizontal
style: FlutterLogoStyle.stacked

ロゴの見た目は「style」で変更できます。

デフォルト値は「FlutterLogoStyle.markOnly」でロゴマークのみ表示されます。

FlutterLogo(
  size: 200,
  style: FlutterLogoStyle.horizontal,
),

テキスト色を変更する

ロゴのテキスト色は「textColor」で変更できます。

FlutterLogo(
  size: 200,
  style: FlutterLogoStyle.horizontal,
  textColor: Colors.red,
),

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter')),
        body: Center(
          child: FlutterLogo(
            size: 200,
            style: FlutterLogoStyle.horizontal,
            textColor: Colors.red,
          ),
        ),
      ),
    );
  }
}

以上です。

合わせて読みたい

参考サイト

目次