【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part12 基本的なウィジェット
「基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part12 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part11 基本的なウィジェット
引き続き、基本的なウィジェットについて学びます。
基本的なウィジェット
Image,RowImageウィジェット
centerSliceプロパティ
centerSlice
プロパティはAndroidの9-Patch
と同じものだそうです。
9-Patch
自体が良くわかりません(笑
調査したところ、以下のような機能だそうです。
「スケールする画像」。
UI パーツの大きさに合わせて、キレイに表示してくれる。
角丸などを固定サイズにすることもできるので、自由自在にスケールさせることが可能。
centerSlice
プロパティを使用するとこのようなことができるようです。
角丸が一番需要ありそうですね🤔
以下のように考える記事も見つけました。(記事が古いかもしれません。)
Flutter では代替機能として Image Widget に centerSlice というプロパティが用意されており、このプロパティに可変領域を指定することで同じようなことができます。しかしその可変領域を複数指定したり、部分的に解除したりすることができないため、機能的には 9-patch のサブセットになってしまっています。そのため現状 Flutter で画像として吹き出しを綺麗に描画するには Canvas で直接描画する以外に方法が無いと思います。
今は込み入った実装は考えていないですが複雑はImageウィジェットは難しいかもしれませんね。
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<StatefulWidget> createState() {
return _State();
}
}
class _State extends State<MyApp> {
int count = 0;
// centerSliceを使ってみました。
Image motoImg = Image.asset(
"images/button.png",
);
Image useImg = Image.asset("images/button.png",
height: 100, width: 350, centerSlice: Rect.fromLTRB(15, 15, 35, 35));
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('テスト中です。'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(child: motoImg),
Container(child: useImg),
],
),
),
),
);
}
}
上の画像が元々の画像です。
したがcenterSlice
プロパティを使用した例です。
元画像よりも大きくなりましたね!(元画像、もともと角丸なのですが・・・)
最後に
centerSlice
プロパティ、調査すると吹き出しとか凝ったことができるようなのですがサンプルがなかなか見当たらず・・・。
今日はここまで!
参考
Flutter と Product と Replace と – 芳和システムデザイン (houwa-js.co.jp)
android – How to display .9.png format of a picture in flutter? – Stack Overflow
ディスカッション
コメント一覧
まだ、コメントがありません