ClipOval Widget in Flutter

Properties

 

  • child
  • clipBehavior
  • clipper
  • runtimeType

 

Example 1:

 

import 'package:flutter/material.dart';


void main() => DemoApp();


class DemoApp extends StatefulWidget {

  @override

  State<StatefulWidget> createState() {

    return DemoAppState();

  }

}


class DemoAppState extends State<DemoApp> {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: const Text("Demo App"),

        ),

        body: Center(

          child: ClipOval(

            child: Container(

              child: Image.network(

                "https://cdn.pixabay.com/photo/2014/09/19/12/30/pencils-452238",

                height: 120,

                width: 180,

              ),

            ),

          ),

        ),

      ),

    );

  }

}

 

Example 2:

 

import 'package:flutter/material.dart';


void main() => DemoApp();


class DemoApp extends StatefulWidget {

  @override

  State<StatefulWidget> createState() {

    return DemoAppState();

  }

}


class DemoAppState extends State<DemoApp> {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: const Text("Demo App"),

        ),

        body: Center(

          child: ClipOval(

            child: Container(

              child: Image.network(

                "https://cdn.pixabay.com/photo/2014/09/19/12/30/pencils-452238",

              ),

            ),

            clipper: myClipper(),

          ),

        ),

      ),

    );

  }

}

 

Example 3:

 

import 'package:flutter/material.dart';


void main() => DemoApp();


class DemoApp extends StatefulWidget {

  @override

  State<StatefulWidget> createState() {

    return DemoAppState();

  }

}


class DemoAppState extends State<DemoApp> {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: const Text("Demo App"),

        ),

        body: Center(

          child: ClipOval(

            child: Container(

              child: Image.network(

                "https://cdn.pixabay.com/photo/2014/09/19/12/30/pencils-452238",

              ),

            ),

            clipper: myClipper(),

          ),

        ),

      ),

    );

  }

}


class myClipper extends CustomClipper<Rect> {

  Rect getClip(Size size) {

    return Rect.fromCircle(center: Offset(80, 10), radius: 100);

  }


  bool shouldReclip(oldClipper) {

    return false;

  }

}


Video Link:

Post a Comment (0)
Previous Post Next Post