CODEWITHSUNDEEP
flutterwidgetavatar
dam034
dam034

Reputation: 411

How to create square avatar with rounded corners on flutter?

I want to create a widget similar to CircleAvatar, but not rounded. This is CircleAvatar:

CircleAvatar

And this is the avatar I want to create:

Square

I want to know if there is a default widget to do this, as CircleAvatar for rounded avatars.

Upvotes: 7

Views: 16978

Answers (3)

IonicFireBaseApp
IonicFireBaseApp

Reputation: 1220

You can use the combination of ClipRRect and Container Widget to achieve the same, use the above code given.

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
  borderRadius: BorderRadius.circular(15.0),//or 15.0
  child: Container(
    height: 70.0,
    width: 70.0,
    color: const Color(0xffFF0E58),
    child: const Icon(Icons.volume_up, color: Colors.white, size: 50.0),
  ),
);
  }
}

Upvotes: 2

Ridwan Abubakar
Ridwan Abubakar

Reputation: 201

There are so many ways to achieve it but I will only make use one. Wrap a ClipRRect() widget around a child widget(this could be an image or any other relevant widget like a Container used in my example). Then, pass BorderRadius.circular(20.0) value to borderRadiusproperty of ClipRRect(). That is the active lines of code that create the effect. Check below for my example:

ClipRRect(
  borderRadius: BorderRadius.circular(20.0),//or 15.0
  child: Container(
    height: 70.0,
    width: 70.0,
    color: Color(0xffFF0E58),
    child: Icon(Icons.volume_up, color: Colors.white, size: 50.0),
  ),
),

see result here

Upvotes: 20

littleironical
littleironical

Reputation: 1914

You can use ClipRRect with specified BorderRadius property like this:

see image here

 ClipRRect(
   borderRadius: BorderRadius.all(Radius.circular(10.0)),//add border radius here
   child: Image.asset('assets/01.jpg'),//add image location here
 ),

Upvotes: 1

Related Questions