Trying to create multiple buttons within a container [Flutter]

Question

So, I've been trying to create a circle with a thick border and a gradient in the border, which is done successfully using box decoration.

Now I want to make buttons shown in the image in blue in the corners of this container. Any ideas on how to do this? I tried using Positioned in stack, but that didn't work as shown below in the code.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  final kInnerDecoration = BoxDecoration(
    color: Colors.white,
    border: Border.all(color: Colors.white),
    borderRadius: BorderRadius.circular(32),
  );
  final kGradientBoxDecoration = BoxDecoration(
    gradient: LinearGradient(
        colors: [Colors.yellow.shade600, Colors.orange, Colors.red]),
    border: Border.all(color: Colors.amber),
    borderRadius: BorderRadius.circular(32),
  );

  @override
  Widget build(BuildContext context) {
    print(MediaQuery.of(context).size.height);
    print(MediaQuery.of(context).size.width);
    return Scaffold(
      body: Stack(
        children: [
          Positioned(
            child: TextButton(onPressed: () {}, child: Text('hi')),
            top: 2,
            left: 30,
          ),
          // This draws the circle with gradient
          Positioned(
            child: ClipOval(
              clipBehavior: Clip.antiAlias,
              child: Container(
                child: Padding(
                  padding: const EdgeInsets.all(8.0), //width of the border
                  child: ClipOval(
                    clipBehavior: Clip.antiAlias,
                    child: Container(
                      width:
                          240.0, // this width forces the container to be a circle
                      height:
                          240.0, // this height forces the container to be a circle
                      decoration: kInnerDecoration,
                    ),
                  ),
                ),
                decoration: kGradientBoxDecoration,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

please try out this and adjust with your requirements

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  final kInnerDecoration = BoxDecoration(
    color: Colors.white,
    border: Border.all(color: Colors.white),
    borderRadius: BorderRadius.circular(32),
  );
  final kGradientBoxDecoration = BoxDecoration(
    gradient: LinearGradient(
        colors: [Colors.yellow.shade600, Colors.orange, Colors.red]),
    border: Border.all(color: Colors.amber),
    borderRadius: BorderRadius.circular(32),
  );

  @override
  Widget build(BuildContext context) {
    print(MediaQuery.of(context).size.height);
    print(MediaQuery.of(context).size.width);
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(20),
          child: Stack(
            children: [

              // This draws the circle with gradient
              Positioned(
                child: ClipOval(
                  clipBehavior: Clip.antiAlias,
                  child: Container(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0), //width of the border
                      child: ClipOval(
                        clipBehavior: Clip.antiAlias,
                        child: Container(
                          width:
                          240.0, // this width forces the container to be a circle
                          height:
                          240.0, // this height forces the container to be a circle
                          decoration: kInnerDecoration,
                        ),
                      ),
                    ),
                    decoration: kGradientBoxDecoration,
                  ),
                ),
              ),
              Positioned(
                child: TextButton(onPressed: () {}, child: Text('hi')),
                top: -16,
                left: 104,
              ),

              Positioned(
                child: TextButton(onPressed: () {}, child: Text('hi')),
                bottom: -16,
                left: 104,
              ),

              Positioned(
                child: TextButton(onPressed: () {}, child: Text('hi')),
                top: 104,
                left: -28,
              ),

              Positioned(
                child: TextButton(onPressed: () {}, child: Text('hi')),
                top: 104,
                right: -28,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Image: