【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part10 基本的なウィジェット

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part10 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part09 基本的なウィジェット

引き続き、基本的なウィジェットについて学びます。

基本的なウィジェット

Image,RowImageウィジェット

fitプロパティ

fitプロパティは親ウィジェットにどのようにフィットさせるか設定するプロパティです。
まずは未指定の場合の実装です。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // home: MyHomePage(title: 'Flutter Demo Home Page'),
      initialRoute: '/',
      routes: {
        '/': (context) => FirstPage(),
      },
    );
  }
}

class FirstPage extends StatelessWidget {
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    final TextTheme textTheme = theme.textTheme;
    final titleStyle =
        textTheme.headline6!.copyWith(color: theme.backgroundColor);
    return Scaffold(
      appBar: AppBar(
          title: Text(
        'First Page',
        style: titleStyle,
      )),
      // 未指定
      body: Image.asset(
        'images/flutter.jpg', ★/*fit:BoxFit.xxxxx*/★
      ),
    );
  }
}

以降、★でくくった部分を修正して確認していきます。

BoxFit.contain

画像を完全に親ウィジェットに収めたまま可能な限り大きくします。
が!使用した画像が良くないようで・・・確認できませんでした。

BoxFit.fill

画像の縦横比を変えて親ウィジェットの大きさにします。
こちらも変化せず・・・。親ウィジェットと画像の大きさが一緒ということでしょうか???

BoxFit.fitHeight

親ウィジェットの高さに画像を合わせます。
・・・変化なしです。

BoxFit.fitWidth

親ウィジェットの幅に画像を合わせます。
😭

BoxFit.cover
fitHeightの結果とfitWidthの結果から親ウィジェット全体をカバーします。
これはイメージしにくいので確認したかったのですがやはり変わらず。

BoxFit.none

親ウィジェット内の画像を整列させます。
始めて効果を実感できました!
noneの指定だとサイズの変更が行われないようで、元サイズのまま整列しようとするようです。

BoxFit.scaleDown

親ウィジェット内の画像を整列させ、必要な場合画像がボックスrに収まるように調整してくれます。

最後に

今回は画像のチョイスと親ウィジェットの設定に失敗してしまったようです。
本書ではわかりやすい例が掲載されています。
これでイメージはつかんだつもりなので良しとします。

今日はここまで!