今回はContainerやImage(画像)などの要素を「星形」に切り抜く方法を紹介します。
要素を星形に切り抜くのにClipPathとStarClipperを使用します。
flutter pub add flutter_custom_clippersimport 'package:flutter_custom_clippers/flutter_custom_clippers.dart';StarClipperを使用するためにflutter_custom_clippersを導入します。
ClipPath(
clipper: StarClipper(5),
child: Container(
width: 250,
height: 250,
color: Colors.lightBlueAccent,
),
),ClipPathで星形に切り抜きたい要素をラップしclipperの引数にStarClipperを渡し、StarClipperのコンストラクタで星のトゲ数を指定します。
5星型は奇数なのでTransform.rotateを使ってせ角度を調整します。(下画像の後で解説)
Transform.rotate(
angle: 60,
child: ClipPath(
clipper: StarClipper(5),
child: Container(
width: 250,
height: 250,
color: Colors.lightBlueAccent,
),
),
),5星形の場合はangle: 60で下画像のような綺麗な角度に変更できます。
ClipPath(
clipper: StarClipper(10),
child: Container(
width: 250,
height: 250,
color: Colors.lightBlueAccent,
),
),StarClipperで星のトゲの数を増やしたり、減らしたりできます。
StarClipper(4)
StarClipper(10)
import 'package:flutter/material.dart';
import 'package:flutter_custom_clippers/flutter_custom_clippers.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: const Text('FlutterZero'),
),
body: MyCustomApp(),
),
);
}
}
class MyCustomApp extends StatefulWidget {
const MyCustomApp({Key? key}) : super(key: key);
@override
State<MyCustomApp> createState() => _MyCustomAppState();
}
class _MyCustomAppState extends State<MyCustomApp> {
@override
Widget build(BuildContext context) {
return Center(
child: ClipPath(
clipper: StarClipper(10),
child: Container(
width: 250,
height: 250,
color: Colors.lightBlueAccent,
),
),
);
}
}