Half circle with some text 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)),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}