Question 79010 in Flutter Question posted in
The official Flutter documentation can be found here.

How to create custom widget in Flutter?

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

Image

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

Tags:

2

Answers


  1. 0

    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'),
    ],
  ),
),

    This should result in something like this

    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.

    Login or Signup to reply.
  2. 0

    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));
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search