尝试在容器中创建多个按钮 [Flutter]答案

【问题标题】：Trying to create multiple buttons within a container [Flutter]尝试在容器中创建多个按钮 [Flutter]
【发布时间】：2021-07-01 10:08:19
【问题描述】：

所以，我一直在尝试创建一个带有粗边框和渐变边框的圆圈，使用盒子装饰成功地完成了。

现在我想在这个容器的角落里以蓝色显示图像中的按钮。关于如何做到这一点的任何想法？我尝试在堆栈中使用 Positioned，但是如下代码所示，它不起作用。

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,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart user-interface

【解决方案1】：

请尝试一下并根据您的要求进行调整

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,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

图片：

【讨论】：