颤动的圆圈中的多个按钮/文本

Jam*_*aid 3 flutter flutter-layout flutter-widget

我正在尝试在颤振中创建一个圆圈。我想添加多个按钮并将它们绑定在这样的圆圈中。 在此处输入图片说明
标记的字段应该是按钮,课程 1只是文本。我能够创建这样的东西,但它只是在按钮中拆分的字符串。
在此处输入图片说明
这是我的代码。我不知道如何完成这项任务。我是扑的新手。

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,
      ),
    ),
  )
),
);
Run Code Online (Sandbox Code Playgroud)

} }

Rav*_*mar 9

尝试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'),
              ],
            ),
          ),
Run Code Online (Sandbox Code Playgroud)

输出

在此处输入图片说明


Jay*_*iya 6

这是你想要的设计吗?

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

在此处输入图片说明

 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,
          ),
        ),
      ), 
Run Code Online (Sandbox Code Playgroud)