Flutter -  How to set Border Radius for Container

In flutter app development, Container widget is the most usable widget. We can use container for parent widget that can contain multiple child widgets and manage them efficiently through width, height, padding, background-color etc. In this article, I am going to share with you the easiest way How to set Border Radius for Container.

 

Set Border Radius With Container : 

We can set the Radius Border using  BoxDecoration. We have to pass BoxDecoration in Container's decoration properties like in the below example.

 

 Container(
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(25)),
        ),
      )

You can see we set 25 Circular Radius.

 

Full Example:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Errorgram',
      home: const Errorgram(title: 'Errorgram'),
    );
  }
}

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red,
          title: Text("Errorgram"),
        ),
        body: Center(
          child: Column(
            children: <Widget>[

              Container(
                margin: EdgeInsets.all(25),
                height: 250,
                width: 250,
                decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(35)),
                  color: Colors.red,
                ),
                alignment: Alignment.center,
                child: const Text('Errorgram',style: TextStyle(fontSize:20,color: Colors.white),),
              ),
              
              Container(
                height: 250,
                width: 250,
                decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(85)),
                  color: Colors.pinkAccent,
                ),
                alignment: Alignment.center,
                child: const Text('Errorgram',style: TextStyle(fontSize:20,color: Colors.white)),
              ),
            ],
          ),
        ));
  }
}

 

 

Output:

 

Conclusion:

In this post, I shared with you the easiest way How to make containers rounded corners/How to set the Border Radius for Container. I hope this article will help you.

 

Tags: