Contents
1.ClipOval
スタート地点
import 'package:flutter/material.dart'; const String imageUri='https://picsum.photos/id/237/200/300'; void main(){ runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home:MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( body:Center( child: Image.network( imageUri, ), ), ); } }
ImageをClipOvalでラップする。
//Stateクラスのみ class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( body:Center( child: ClipOval( child: Image.network( imageUri, ), ), ), ); } }
SizedBoxでラップしてサイズを指定する。
//Stateクラスのみ class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( body:Center( child: SizedBox( height:100.0,//200.0,400.0, child: ClipOval( child: Image.network( imageUri, ), ), ), ), ); } }
height=100, height=200, height=300,
2.ClipRRect
ImageをClipRRectウィジェットでラップして、borderRadiusを指定する。
//Stateクラスのみ。 class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: ClipRRect( borderRadius:BorderRadius.all(Radius.circular(30.0)), //borderRadius:BorderRadius.all(Radius.circular(70.0)), //borderRadius:BorderRadius.all(Radius.circular(130.0)), child: Image.network( imageUri, ), ), ), ); } }
Radius.circular(30.0), Radius.circular(70.0), Radius.circular(130.0),
//Stateクラスのみ class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: ClipRRect( borderRadius: BorderRadius.only( topLeft: Radius.circular(160.0), ), child: Image.network( imageUri, ), ), ), ); } }
//Stateクラスのみ class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: ClipRRect( borderRadius: BorderRadius.only( topLeft: Radius.circular(160.0), topRight:Radius.circular(60.0), ), child: Image.network( imageUri, ), ), ), ); } }
class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: ClipRRect( borderRadius: BorderRadius.only( topLeft: Radius.circular(200.0), topRight:Radius.circular(150.0), bottomLeft: Radius.circular(150.0), bottomRight:Radius.circular(200.0), ), child: Image.network( imageUri, ), ), ), ); } }