【 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に収まるように調整してくれます。
最後に
今回は画像のチョイスと親ウィジェットの設定に失敗してしまったようです。
本書ではわかりやすい例が掲載されています。
これでイメージはつかんだつもりなので良しとします。
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません