How to create custom widget in Flutter?

Question

I need to create a custom widget. In the image there is two circles and in the circles there must be some other widgets.

I tried to use Stack and pray for it to be responsive but it didn't. Any ideas?

Answer 1

Try using BoxShape.circle,

      Container(
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          border: Border.all(width: 3),
          shape: BoxShape.circle,
          // You can use like this way or like the below line
          //borderRadius: new BorderRadius.circular(30.0),
          color: Colors.amber,
        ),
        child:Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('ABC'),
            Text('XYZ'),
            Text('LOL'),
          ],
        ),
      ),

To achieve this in general I would recommend using a Column and then 3 Containers, one for each Circle, and something that draws the in-between part.

Answer 2

Custom widget in Flutter is built for Widget Reusability in App. Custom widgets in Flutter can be of many types Widgets are built to make your code clean and Shorter. It makes the Customization of Code Simple and Easy

// code

** Simple Button Custom Widget **

import 'package:flutter/material.dart';
class button extends StatelessWidget {
  button(
      {super.key,
      required this.buttonfun,
      required this.iconData,
      required this.textdata});
  IconData iconData;
  String textdata;
  VoidCallback buttonfun;
  @override
  Widget build(BuildContext context) {
    return ElevatedButton.icon(
        onPressed: buttonfun, icon: Icon(iconData), label: Text(textdata));
  }
}