Center a circle in other device

Question

Thank you for your solution I did it I would like with this situation center vertically my circle is it possible? if yes how can I do please
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(widget.title),
      ),
      body: Container(
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: 20,
                ),
                Center(
                  child: Text("Text 1", textScaleFactor: 2,),
                ),
                SizedBox(
                  height: 20,
                ),
                Center(
                  child: Text("Text 2", textScaleFactor: 2,),
                ),
                SizedBox(
                  height: 20,
                ),
                Center(
                  child: Text("Text 3", textScaleFactor: 2,),
                ),
                Center(
                  child: CircleAvatar(
                    backgroundColor: Colors.teal,
                    radius:   30,
                  ),
                ),
              ],
            ),
        ),
      );
  }
}

Alok · Answer

There are numerous ways you can do this.

1. USING CENTER AND CONTAINER

     Container(
        height: double.infinity, // this parent height takes up the full height of the device
        width: double.infinity, // this parent width takes up the full width of the device
        child: Center(
          child: CircleAvatar(
            backgroundColor: Colors.teal,
            radius: 50
          )
        )
      )

2. IF YOU WANT TO USE STACK

     Container(
        height: double.infinity,
        width: double.infinity,
        child: Stack(
          children: <Widget>[
            Positioned(
              child: Center(
                child: CircleAvatar(
                  backgroundColor: Colors.teal,
                  radius: 50,
                )
              )
            )
          ]
        )
      )

OR

If you don't want to use Positioned, then it is completely fine. You can only use Center() inside your stack and achieve this, unless, you have the specific requirements for Positioned

      //This is same as the 2nd case, but no Poisitioned widget is used
      Container(
        height: double.infinity,
        width: double.infinity,
        child: Stack(
          children: <Widget>[
            // Simple center, and you will get the same data
            Center(
              child: CircleAvatar(
                backgroundColor: Colors.teal,
                radius: 50,
              )
            )
          ]
        )
      )

In both the ways you will achieve your goal. The screenshot reveals the result, which we get after using any of the above codes.

ANSWER 2.0

You have to just edit the question in order to ask your problem Carle. In order to achieve what you want, the below code will help you achieve this.

Before that, I am confirming your requirement => You need the circle to come vertically centered as per the device with other widgets pointed to top

        Container(
          height: double.infinity,
          width: double.infinity,
          child: Stack(
            children: <Widget>[
              // This is different widgets, which represents another entity
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(
                    height: 20,
                  ),
                  Center(
                    child: Text("Text 1", textScaleFactor: 2,),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Center(
                    child: Text("Text 2", textScaleFactor: 2,),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Center(
                    child: Text("Text 3", textScaleFactor: 2,),
                  )
                ]
              ),
              // This comes overlapped, and uses the whole height of the device
              // and comes vertically centered which you want
              Center(
                child: CircleAvatar(
                  backgroundColor: Colors.teal,
                  radius:   30,
                )
              )
            ]
          )
        )

RESULT YOU WILL GET

Do give it a read about Stack class, it will surely help you understand more about Flutter. It is more of like relative-position in HTML.

mohandesR · Answer

you can try ...
positioned.fill(
  child:Center( 
    child:CircleAvatar()
   )
)

Filip · Answer

You can wrap the CircleAvatar by Center and then by Container with width: MediaQuery.of(context).size.width and this container inside the Positioned and set only top position.

Center a circle in other device

3 Answers

Add your own answers!

Ask a Question