CODEWITHSUNDEEP
flutterdart
mobdevkun
mobdevkun

Reputation: 463

Flutter: How can I increase radius of border in Circle Image?

I have class CircleImage, with this I try to control radius of circle image and CircleBorder, but i can't do it. I saw, that I have to use Circle avatar with Border. I try to solve this problem a whole day, please help me:)

This my code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CircleImage extends StatelessWidget {
  final String imageSource;
  final double size;

  CircleImage({@required this.imageSource, this.size}) : super();

  @override
  Widget build(BuildContext context) {
    return Container(
        width: size ?? 55,
        height: size ?? 55,
        decoration: ShapeDecoration(
            shape: CircleBorder(
              side: BorderSide(width: 1, color: Theme.of(context).primaryColor),
            ),
            image: DecorationImage(
                fit: BoxFit.fill,
                image: AssetImage(imageSource),
                alignment: Alignment.center)));
  }
}

What that I have in this moment What that I have in this moment

Upvotes: 0

Views: 7113

Answers (2)

Matthew Rideout
Matthew Rideout

Reputation: 8566

You need to use a CircleAvatar inside a CircleAvatar, like this:

CircleAvatar(
    radius: 33.0,
    backgroundColor: Colors.blue,
    child: CircleAvatar(
        backgroundColor: Colors.white,
        radius: 30.0,
        backgroundImage: AssetImage('images/text-image.png'),
    ),
),

The difference in radius between the outer and inner CircleAvatar radius properties will be the border thickness.

In this case, it creates a blue border.

Upvotes: 0

Joshua Craven
Joshua Craven

Reputation: 4565

I think you're looking for a RoundedRectangleBorder, not a CircleBorder.

https://api.flutter.dev/flutter/painting/RoundedRectangleBorder-class.html

shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
        side: BorderSide(
          width: 1,
          color: Theme.of(context).primaryColor
        ),
      ),

Then, you can change the border radius as you wish...

shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20.0), // CHANGE BORDER RADIUS HERE
        side: BorderSide(
          width: 1,
          color: Theme.of(context).primaryColor
        ),
      ),

Upvotes: 1

Related Questions