Multiple buttons/Texts in a circle in flutter

Question

I'm trying to create a circle in the flutter. I want to add multiple buttons and bound them in a circle like this.
The marked fields are supposed to be buttons and Course 1 is just the text. I am able to create something like this but it is only string splitted in the button.

Here is my code for this. I'm not getting any idea about how to do this task. I'm new to 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

There are multiple ways to make the border round. As of now you are using fixed height and width always use greater number for border-radius.

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

here is the code which works fine when you have fixed height and width of the container.

Note: This works only fine when your heigh and width is fixed for the container because the padding in the code is static.If you want dynamic then please use the screen calculation techniques to make if responsive

Making any widget clickable in the Flutter.

There are a couple of Widgets available to make any widget clickable

1. Gesture Detector

   This widget has many methods including onTap() which means you can attach a callback when the user clicks on the widget. For eg (this is used in your code)

   GestureDetector( onTap: (){}, //this is call back on tap child: Text("Mark Attendance") )

2. InkWell Widget (Note: This widget will only work when it is a child of the Material widget)

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

Here is the working code.

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

Thanks, I hope is information was helpfull

Answer 2

is this design that you want?

it contain two button and one text widget

 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

try 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'),
              ],
            ),
          ),

Output