dartflutter

Flutter circle file image with clip oval


I want to clip an image that I extracted from the image picker plugin and it does not work with BoxDecoration.circle , so I want to clip it as circle with oval clipper. How to achive it ?


Solution

  • You can use CircleAvatar widget to display the obtained image to make it circular.

    import 'dart:async';
    import 'dart:io';
    
    import 'package:flutter/material.dart';
    import 'package:image_picker/image_picker.dart';
    
    void main() => runApp(new MaterialApp(debugShowCheckedModeBanner: false, home: new MyApp()));
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => new _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      File _image;
    
      Future getImage() async {
        var image = await ImagePicker.pickImage(source: ImageSource.camera);
    
        setState(() {
          _image = image;
        });
      }
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text('Home'),
          ),
          body: new Center(
            child: _image == null
                ? new Text('No image selected.')
                : new CircleAvatar(backgroundImage: new FileImage(_image), radius: 200.0,),
          ),
          floatingActionButton: new FloatingActionButton(
            onPressed: getImage,
            tooltip: 'Pick Image',
            child: new Icon(Icons.add_a_photo),
          ),
        );
      }
    }