【Flutter】ClipOval|Widgetを楕円形にトリミング(切り抜く)

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

ClipOvalを使えばImageなどのWidgetを楕円形(または円型)にトリミングできます。

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

目次

ClipOvalの使い方

ClipOval(
  child: Image.network(
    'https://images.unsplash.com/photo-1605642969091-694bacbbf7d8',
    width: 300,
  ),
),

楕円形にトリミングしたいWidgetをClipOvalでラップします。

ClipOvalでラップするWidgetのサイズによって楕円形の形は異なります。

ClipOvalあり

ClipOvalなし

正方形のWidgetは円形にトリミングされる

ClipOval(
  child: Image.network(
    'https://images.unsplash.com/photo-1597248374161-426f0d6d2fc9',
    width: 300,
  ),

ClipOvalでラップしたWidgetが正方形の場合は円形にトリミングされます。

ClipOvalあり

ClipOvalなし

サンプルコード

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: ClipOval(
            child: Image.network(
              'https://images.unsplash.com/photo-1605642969091-694bacbbf7d8',
              width: 300,
            ),
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

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