多个buttons/Texts围成一圈扑扑

Question

我正在尝试在 flutter 中创建一个圆圈。我想添加多个按钮并像这样将它们绑定在一个圆圈中。
标记的字段应该是按钮，课程 1 只是文本。我能够创建这样的东西，但它只是在按钮中拆分的字符串。

这是我的代码。我不知道如何完成这项任务。我是 flutter 的新手。

import 'package:flutter/material.dart';
void main(){runApp(MyApp());}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
  appBar: new AppBar(
    title: Text("Student home"),
  ),
  body:Center(
    child: Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      width: 200,
      height: 200,
      child: Center(
        child: Text("Course 1 \n Course 2",

            style: TextStyle(fontSize: 12.0,
              fontStyle: FontStyle.italic,


        ),

          textAlign: TextAlign.center,

        ),
      ),
      decoration: BoxDecoration(
        border:Border.all(width:3),
        borderRadius: BorderRadius.all(
          Radius.circular(50),
        ),
          color: Colors.yellow,
      ),
    ),
  )
),
);

} }

Answer 1

尝试shape: BoxShape.circle,,

          Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
              border: Border.all(width: 2),
              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'),
              ],
            ),
          ),

输出

Answer 2

这个设计是你想要的吗？

它包含两个按钮和一个文本小部件

 body: Center(
        child: Container(
          margin: EdgeInsets.all(10),
          padding: EdgeInsets.all(10),
          width: 200,
          height: 200,
          child: Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  "Course 1",
                  style: TextStyle(
                    fontSize: 12.0,
                    fontStyle: FontStyle.italic,
                  ),
                  textAlign: TextAlign.center,
                ),
                MaterialButton(
                  onPressed: () {
                    //do whatever you want
                  },
                  child: Text("Mark Attendance"),
                ),
                MaterialButton(
                  onPressed: () {
                    //do whatever you want
                  },
                  child: Text("Mark Attendance"),
                ),
              ],
            ),
          ),
          decoration: BoxDecoration(
            border: Border.all(width: 3),
            borderRadius: BorderRadius.all(
              Radius.circular(200),
            ),
            color: Colors.yellow,
          ),
        ),
      ),

Answer 3

有多种方法可以使边框变圆。截至目前，您使用的是固定高度和宽度，始终对边框半径使用更大的数字。

For eg. when your heigh is 200X200 use 150-200 number for border-radius.

这里是当你有固定的容器高度和宽度时工作正常的代码。

注意：只有当容器的高度和宽度固定时，这才有效，因为代码中的填充是 static.If 你想要动态的，那么请使用屏幕计算技术来制作如果响应

Making any widget clickable in the Flutter.

有几个小部件可用于使任何小部件可点击

手势检测器

这个小部件有很多方法，包括 onTap() 这意味着您可以在用户点击该小部件时附加回调。例如（这在您的代码中使用）

GestureDetector( onTap: (){}, //this is call back on tap child: Text("Mark Attendance") )
InkWell 小部件（注意：此小部件仅在它是 Material 小部件的子项时才有效）

Material( child: InkWell( onTap: (){}, child: Text("Mark Attendance"), ), )

这是工作代码。

import 'package:flutter/material.dart';
void main(){runApp(MyApp());}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
  appBar: new AppBar(
    title: Text("Student home"),
  ),
  body:Center(
    child: Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      width: 200,
      height: 200,
      child: Column(

        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(bottom:40.0,top: 20.0),
            child: Text("Course 1"),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[

             Padding(
               padding: const EdgeInsets.all(8.0),
               child: GestureDetector(
                 onTap: (){},
                 child: Text("Mark Attendance")),
             ),
             Padding(
               padding: const EdgeInsets.all(8.0),
               child:Material(
                 child: InkWell(
                   onTap: (){},
                   child: Text("Mark Attendance"),
                 ),
               )
             ),
          ],)
        ],
      ),
      decoration: BoxDecoration(
        border:Border.all(width:3),
        borderRadius: BorderRadius.all(
          Radius.circular(150),
        ),
          color: Colors.yellow,
      ),
    ),
  )
),
);
} }

Note: Material widget always set the background as white for the text widget

谢谢，希望信息对您有所帮助

多个buttons/Texts围成一圈扑扑

Multiple buttons/Texts in a circle in flutter

flutter

flutter-layout

flutter-widget