Two circles touching with lines. How to fit this UI for all type of tabs and screens in flutter?

enter image description here

I need to achieve this programmatically in flutter for all tabs and mobile screens.

• try this.

 Transform.scale(
            scale: .5,
            child: const SizedBox(
              width: 100,
              height: 100,
              child: FlutterLogo(),
            ),
  ),

Try with following basic code, you can customise as your requirement

Stack(
  children: [
    Container(
      height: 32,
      decoration: BoxDecoration(
        color: Colors.white, borderRadius: BorderRadius.circular(16),
        border: Border.all(color: Colors.tealAccent, width: 2),
      ),
      
    ),Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Container(
          height: 32,
          width: 32,
        margin: const EdgeInsets.all(0),
          decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(16),
            border: Border.all(color: Colors.tealAccent, width: 2),
          ),
          alignment: Alignment.center,
          child: const Icon(Icons.arrow_back_ios, size: 24, color: Colors.tealAccent,)),
      Text('Your Text Here'),
      Container(
          height: 32,
          width: 32,
        margin: const EdgeInsets.all(0),
          decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(16),
            border: Border.all(color: Colors.tealAccent, width: 2),
          ),
          alignment: Alignment.center,
          child: const Icon(Icons.arrow_forward_ios, size: 24, color: Colors.tealAccent,))
    ],
  )
  ],
)

U gotta do it manually by fixing the Height. i did one for u.

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 60,
          width: double.infinity,
          child: Stack(
            children: [
              Positioned(
                top: 0,
                bottom: 0,
                left: 40,
                right: 40,
                child: Container(
                  constraints: const BoxConstraints.expand(),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.cyan, width: 2),
                  ),
                  child: const Center(child: Text('Hello man')),
                ),
              ),
              Positioned(
                top: 0,
                left: 0,
                bottom: 0,
                width: 80,
                child: _icon(Icons.arrow_back_ios_new),
              ),
              Positioned(
                top: 0,
                right: 0,
                width: 80,
                bottom: 0,
                child: _icon(Icons.arrow_forward_ios),
              ),
            ],
          ),
        ),
      ),
    );
  }
 
  Widget _icon(IconData icon) => Container(
        constraints: const BoxConstraints.expand(),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.white,
          border: Border.all(color: Colors.cyan, width: 2),
          boxShadow: [
            BoxShadow(
              color: Colors.grey[200]!,
              spreadRadius: 1,
              blurRadius: 20,
            ),
            BoxShadow(
              color: Colors.grey[300]!,
              spreadRadius: 1,
              blurRadius: 20,
            )
          ],
        ),
        child: Icon(
          icon,
          color: Colors.cyan,
        ),
      );
}