【 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プロパティ、調査すると吹き出しとか凝ったことができるようなのですがサンプルがなかなか見当たらず・・・。

今日はここまで!

参考

9-patch ファイルの作成 – Qiita

Flutter と Product と Replace と – 芳和システムデザイン (houwa-js.co.jp)

`centerSlice` doesn’t work properly with resolution-aware image assets · Issue #20013 · flutter/flutter · GitHub

android – How to display .9.png format of a picture in flutter? – Stack Overflow