【Flutter】ClipRect|Widgetの一部を四角形にトリミング(切り抜く)

今回はClipRectの基本的な使い方を紹介します。

ClipRectを使えばImageなどのWidgetの一部を四角形にトリミングできます。

\ 世界最大級のオンライン学習サービス /

目次

ClipRectの使い方

ClipRect(
  child: Align(
    alignment: Alignment(-0.2, -0.5),
    heightFactor: 0.6,
    widthFactor: 0.8,
    child: Image.network(
      'https://images.unsplash.com/photo-1605642969091-694bacbbf7d8',
      width: 300,
    ),
  ),
),

四角にトリミングしたいWidgetをClipRectAlignの順(階層降順)でラップし、AlignheightFactorwidthFactorでトリミングする高さ、横幅をそれぞれ調整します。

alignmentの引数にAlignmentを渡してトリミングの中心位置を指定します。

ClipRectあり

ClipRectなし

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FlutterZero')),
        body: Center(
          child: ClipRect(
            child: Align(
              alignment: Alignment(-0.2, -0.5),
              heightFactor: 0.6,
              widthFactor: 0.8,
              child: Image.network(
                'https://images.unsplash.com/photo-1605642969091-694bacbbf7d8',
                width: 300,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次