Rounded Corner Rectangle Square Shape In Flutter App

admin_img Posted By Bajarangi soft , Posted On 10-10-2020

There are two famous shapes for solving and defining math equations Rectangle and Square shape. In flutter its easy to create simple rectangle and square shape using container widget but they have sharp edges and the corner is sharp but using BoxDecoration property of box decoration we can easily make the edges rounded. The box decoration has a sub property named as BorderRadius.all() which supports double value and used to make the edges rounded in Container widget.

Rounded Corner Rectangle Square Shape In Flutter App

Rounded Corner Rectangle Square Shape
Complete Code For Rounded Corner Rectangle Square Shape In Flutter
main.dart

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blueAccent,
            title: Text('Rounded Corner Rectangle Square Shape'),
          ),
            backgroundColor: Colors.white,
            body: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Container(
                      height: 150.0,
                      width: 300.0,
                      color: Colors.transparent,
                      child: Container(
                          decoration: BoxDecoration(
                              color: Colors.pink,
                              borderRadius: BorderRadius.all(Radius.circular(10.0))),
                          child: new Center(
                            child: new Text("Rounded Corner Rectangle Shape",
                              style: TextStyle(color: Colors.white, fontSize: 20),
                              textAlign: TextAlign.center,),
                          )),
                    ),

                    Container(
                      height: 100.0,
                      width: 155.0,
                      color: Colors.transparent,
                      child: Container(
                          decoration: BoxDecoration(
                              color: Colors.pink,
                              borderRadius: BorderRadius.all(Radius.circular(10.0))),
                          child: new Center(
                            child: new Text("Rounded Corner Square Shape",
                              style: TextStyle(fontSize: 18, color: Colors.white),
                              textAlign: TextAlign.center,),
                          )),
                    ),
                  ],)
            )
        )
    );
  }
}

 

Related Post