【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part34 Single-child layout widgets
「基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part34 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part33 Single-child layout widgets
引き続き、Single-child layout widgetsについて学びます。
Single-child layout widgets
FittedrBoxウィジェット
FittedBox
ウィジェットは親ウィジェットへの収め方を決められるウィジェットです。
BoxFit
列挙型で指定します。
BoxFit
列挙型はImage, RowImage
ウィジェットでも使用しました。と、今回は記述してくれています!
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new MyApp()));
}
var ok = false;
class MyApp extends StatefulWidget {
@override
State createState() {
return _State();
}
}
class _State extends State {
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
var w = size.width;
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('テスト中です。'),
),
body: Column(
children: [
// 画像が275 x 86に対して親ウィジェットが300 x 300なので
// 高さが300に拡大され、Alignment.centerRightで右寄せになります。
Container(
width: 300,
height: 300,
color: Colors.green,
child: FittedBox(
alignment: Alignment.centerRight,
fit: BoxFit.fitHeight,
child: Image.asset('images/flutter_275x86.jpg'))),
// 親の方の制限が厳しいので画像が縮小されます。
// 右寄せなので親うぃじぇとの背景が少し表示されています。
Container(
width: 200,
height: 50,
color: Colors.green,
child: FittedBox(
alignment: Alignment.centerRight,
fit: BoxFit.fitHeight,
child: Image.asset('images/flutter_275x86.jpg'))),
],
)));
}
}
表示してみました。
最後に
やはり画像を使った学習は比較的わかりやすいですね。助かります😄
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません