Flutter Create Rounded Corner Rectangle Square Shape Container Example

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. So in this tutorial we would Flutter Create Rounded Corner Rectangle Square Shape Container Android iOS Example Tutorial.

Contents in this project Flutter Create Rounded Corner Rectangle Square Shape Container Android iOS Example Tutorial:

1. Import material.dart package in your app’s main.dart file.

2. Create void main runApp() method and here we would call our main MyApp class.

3. Create our main MyApp class extends with Statelesswidget.

4. Create Widget build area in MyApp class. Now we would make the Scaffold widget-> Center widget -> Column widget. We would use the Column widget to put multiple children.

5. Creating a Container widget in Column widget. This is our Rectangle shape view.

6. Creating another Container widget in Column widget. This is our Square view. The main difference between square and rectangle is that square shape has same width and height and in rectangle shape the width is twice than height of view.

7. Complete source code for main.dart file:

Screenshot:

2 Comments

  1. Thank God! it was easy and understandable.

  2. Thank you so much for this post.

Leave a Reply

Your email address will not be published.