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,
          ),
        ),
      ),
    );
  }
}

---