circle in container Flutter - flutter

Question

I have a flutter app,
and I need to make a circle in a container in flutter.
I try to create a container and put an image inside it but the circle is to small,
here is my code:
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("ipage.jpeg),
fit: BoxFit.fitWidth,
),
),
child: Align(
alignment: Alignment.bottomCenter,
child: CircleAvatar(backgroundColor: Colors.transparent,
child: Image.network('https://image.flaticon.com/icons/png/512/147/147144.png' , height:150,),
),
),
),
Please help me how can I do that in flutter

Answer 1

according to your demand you need to use Stack here.
This can archive this way
import 'package:flutter/material.dart';
class FFTBuild extends StatelessWidget {
const FFTBuild({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final mainBoxheight = MediaQuery.of(context).size.height / 1.9;
return Container(
height: mainBoxheight,
color: Colors.cyanAccent,
child: Stack(
children: [
Align(
alignment: Alignment.topCenter,
child: Image.asset(
"assets/image.jpg",
height: mainBoxheight * .85,
width: double.infinity,
fit: BoxFit.cover,
),
),
Align(
alignment: Alignment.bottomCenter,
child: Image.network(
'https://image.flaticon.com/icons/png/512/147/147144.png',
fit: BoxFit.cover,
width: 150,
height: 150,
),
),
],
),
);
}
}
But I prefer LayoutBuilder instead of using MediaQuery
class FFTBuild extends StatelessWidget {
const FFTBuild({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
// final mainBoxheight = MediaQuery.of(context).size.height / 1.9;
return LayoutBuilder(
builder: (context, constraints) => Container(
height: constraints.maxHeight * .4,
///I added `Container Color`to clarify the thing,
// color: Colors.cyanAccent,
child: Stack(
children: [
Align(
alignment: Alignment.topCenter,
child: Image.asset(
"assets/image.jpg",
height: constraints.maxHeight * .3,
width: constraints.maxWidth,
fit: BoxFit.cover,
),
),
Align(
alignment: Alignment.bottomCenter,
child: Image.network(
'https://image.flaticon.com/icons/png/512/147/147144.png',
fit: BoxFit.cover,
width: 150,
height: 150,
),
),
],
),
),
);
}
}
you may need to set tweak the value according to your desire. let me know if you need more on it.

Answer 2

Simply add radius to the circle avatar and modify circle avatar a bit
Container(
height: MediaQuery.of(context).size.height / 1.9,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("${ImagePath.profileCover}"),
fit: BoxFit.fitWidth,
),
),
child: Align(
alignment: Alignment.bottomCenter,
child: CircleAvatar(
radius: 100,//increase or decrease this for the size of your image
backgroundImage: NetworkImage('https://image.flaticon.com/icons/png/512/147/147144.png'),
),
),
),