Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks
Create rounded corner using border radius in flutter

Create rounded corner using border radius in flutter ?

Aman Jain, September 15, 2022March 16, 2024

Rounded corner gives a decent look to any widget and rounded corner can be create using the border radius property of container. we can add border radius or shape to any container, image, button, text, input and etc. so in this article we will learn to create rounded corner using border radius in flutter.

Flutter use BoxDecoration class to render the border and borderRadius in container widget it accepts multiple options like border, border radius, color, background image, gradient, shape and etc. so to add the borderRadius first we need to add decoration option to container and then in decoration value we need to assign BoxDecoration class to implement the border.

borderRadius options

BorderRadius.all(Radius.elliptical(5, 25));
BorderRadius.all(Radius.circular(20)) ; // same as BorderRadius.circular(20);
BorderRadius.only(bottomLeft: Radius.circular(5),bottomRight:..,topRight: ..,bottomRight:.. , topLeft: ...); BorderRadius.vertical({
    Radius top = Radius.zero,
    Radius bottom = Radius.zero,
})
BorderRadius.horizontal({
    Radius left = Radius.zero,
    Radius right = Radius.zero,
})

You can simple create rounded corner using border radius in flutter as follow

Container(
          padding: const EdgeInsets.all(10),
          decoration: BoxDecoration(
              border: Border.all(color: Colors.red),
              borderRadius: BorderRadius.circular(20.0)),
          child: const Text(
            'Hello, World!',
            style: TextStyle(color: Colors.white, fontSize: 30),
          ),
),
rounded corner in flutter using border radius
rounded corner in flutter using border radius

One side border radius to widget flutter

Sometimes we also want to add border radius to specific one side of widget or container so then we can use BorderRadius.only class named constructor to add the border radius to the one side or any side of container as follow

Container(
  padding: EdgeInsets.all(10),
  decoration: BoxDecoration(
      border: Border.all(color: Colors.white),
      borderRadius: const BorderRadius.only(
          bottomLeft: Radius.circular(20.0),
          topRight: Radius.circular(20.0))),
  child: const Text(
    'Hello, World!',
    style: TextStyle(color: Colors.white, fontSize: 30),
  ),
),
one side rounded corner in flutter using border radius
one side rounded corner in flutter using border radius

Let’s understand Create rounded corner using border radius in flutter with example

Step 1 : Create flutter project

Very first step is to create the fluter application using command line tool or in Android studio.

flutter create example_app

This will create a new project with name my_app then go in to the folder .

Step 2 : Create a simple widget

Now, Create a simple state less widget to add the border to widget as follow

File : lib/borderexample.dart


class BorderExample extends StatelessWidget {
  @override
  Widget   Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Border Radius Example '),
      ),
      body: Center(
          child: Container(
              padding: const EdgeInsets.all(10),
              width: double.infinity,
              color: Colors.black,
              child: Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Container(
                    padding: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                        border: Border.all(color: Colors.white),
                        borderRadius: const BorderRadius.horizontal()),
                    child: const Text(
                      'Hello, World!',
                      style: TextStyle(color: Colors.white, fontSize: 30),
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.all(10),
                    decoration: BoxDecoration(
                        border: Border.all(color: Colors.red),
                        borderRadius: BorderRadius.circular(20.0)),
                    child: const Text(
                      'Hello, World!',
                      style: TextStyle(color: Colors.white, fontSize: 30),
                    ),
                  ),
                ],
              ))),
    );
  }
}

Step 3: Import and use the widget in main

We just created a new widget with name BorderExample, now we are going to use it in our main.dart file as below

import 'package:flutter/material.dart'; 
import 'package:example_app/BorderExample.dart';;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: BorderExample(),
        ),
      ),
    );
  }
}

Step 4: Run the project

Simply run the project using command line or in android studio to check the implementation.

flutter run lib/main.dart

Read Also : How to add border to container or any widget flutter?

Related

Dart Flutter borderborderRadiusFluttter

Post navigation

Previous post
Next post

Related Posts

Dart How to add one side border to container widget flutter

How to add one side border to container widget flutter?

September 17, 2022March 16, 2024

In this tutorial we will learn to add add one side border to container widget flutter. Border is used to create border around the widget or container and using the border we can style it in different way like adding the width of border, color of border and one side…

Read More
Dart Display Remote Image in Flutter

How to show remote image in flutter application?

January 2, 2022January 15, 2022

In this tutorial we will learn to show image in flutter. In flutter there is two types of images we can show one is asset image and other one is network image. To use the images in flutter we have Image class which supports both local and remote images. For…

Read More
Dart flutter refresh page on back

How to refresh a page or widget on navigation pop/back in flutter ?

April 28, 2022November 5, 2023

Sometime in out application we want to refresh a page or widget on navigation pop/back in flutter because we want to update the state of our page so users can see the latest update based on their actions. So In this article I will show you to flutter refresh page…

Read More

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 11
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • May 2025
  • April 2025
  • October 2024
  • July 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • Understanding High Vulnerabilities: A Deep Dive into Recent Security Concerns
  • Understanding High Vulnerabilities in Software: A Week of Insights
  • Blocking Spam Requests with LaraGuard IP: A Comprehensive Guide
  • Enhancing API Development with Laravel API Kit
  • Exploring the Future of Web Development: Insights from Milana Cap
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version