Half circle with some text Flutter - flutter

Question

I'm new to flutter, but I would like to know if it's possible to do something like this in flutter? the drawing of half a circle inside two texts, I will use it inside a login form.

Answer 1

You can use Stack widget for customizable overlay.
home: Scaffold(
body: LayoutBuilder(
builder: (context, constraints) {
final width = constraints.maxWidth;
return SizedBox(
width: width,
height: constraints.maxHeight,
child: Stack(
children: [
// background 1st
Positioned(
top: 10,
left: -width * .4,
bottom: 10,
right: 10,
child: Container(
decoration: const ShapeDecoration(
shape: CircleBorder(),
color: Colors.grey,
),
),
),
Align(
alignment: Alignment(-.4, .2),
child: Text("Some Text"),
),
Align(
alignment: Alignment(-.4, -.2),
child: Text("Some Text"),
),
],
),
);
},
),
),
Check more about Stack widget and /ui/layout.

Answer 2

you can create container with the color grey and make some changes in the box decoration. like the border radius. here is the code.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
body: Center(
child: SizedBox(
height: 200,
width: 125,
child: Container(
decoration: const BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(200),
topRight: Radius.circular(200),
bottomLeft: Radius.circular(0),
topLeft: Radius.circular(0)),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("SOME TEXT", style: TextStyle(fontSize: 15)),
SizedBox(
height: 50,
),
Text("SOME TEXT", style: TextStyle(fontSize: 15)),
],
),
),
),
),
),
);
}
}