Button with indicator(photo example) [closed]

Question

Hi, as the title says, I need to make a button like on the photo. Thanks. There's no code, because I have no idea how to do it.

Answer 1

I am not sure about what specific functionality you are doing using the button in your image circular grey border has two colours blue and grey if you want to show processing through a grey circular box then you have to use a different approach if you specify what you want to do through this button I will try a different approach the simple static button code is here. I Hope this will help you.

import 'package:flutter/material.dart';

class X extends StatefulWidget {
  const X({Key? key}) : super(key: key);

  @override
  _XState createState() => _XState();
}

class _XState extends State<X> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: (){},
          child: Container(
            height: 60,
            width: 60,
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(color: Colors.grey, width: 3)),
            child: Padding(
              padding: const EdgeInsets.all(5.0),
              child: Container(
                height: 30,
                width: 30,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.blueAccent,
                ),
                child: Icon(Icons.keyboard_tab,color: Colors.white,),
              ),
            ),
          ),
        ),
      ),
    );
  }
}