How can I add a border to a widget in Flutter?

Flutter UIFlutter Display WidgetsFlutter Fever

In Flutter, you can add different types of borders to a widget using the Border class and its subclasses, such as Border.all, BorderDirectional, BorderRadius, BorderSide, etc. These classes allow you to define borders with various styles, colors, and radii.

While developing a Flutter app, you may add a lot of Container widgets. But sometimes you may want to add a container with a border to create a box UI such as buttons, keys, cards, etc.

Here’s how you can add different types of borders to a widget:

Using Container widget:

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red, // Border color
      width: 2.0, // Border width
    ),
    borderRadius: BorderRadius.circular(10.0), // Border radius
  ),
  child: YourWidget(),
)

This code snippet creates a Container widget with a red border of width 2.0 and a border radius of 10.0. Replace YourWidget() with the widget you want to apply the border to.

Using Material widget:

Material(
  borderRadius: BorderRadius.circular(10.0), // Border radius
  elevation: 3.0, // Shadow elevation
  borderOnForeground: true, // Whether to paint the border on top of the child
  color: Colors.white, // Background color
  child: YourWidget(),
)

This code snippet creates a Material widget with a rounded border of radius 10.0 and elevation of 3.0. Replace YourWidget() with the widget you want to apply the border to.

Using Card widget:

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0), // Border radius
    side: BorderSide(
      color: Colors.red, // Border color
      width: 2.0, // Border width
    ),
  ),
  elevation: 3.0, // Shadow elevation
  child: YourWidget(),
)

This code snippet creates a Card widget with a red border of width 2.0, rounded corners with a radius of 10.0, and elevation of 3.0. Replace YourWidget() with the widget you want to apply the border to.

These are just a few examples of how you can add different types of borders to widgets in Flutter. You can customize the border properties according to your requirements by adjusting the color, width, radius, etc.

here’s a complete example demonstrating how to add different types of borders to widgets in Flutter:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Border Example : flutterfever'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: 100,
                height: 60,
                decoration: BoxDecoration(
                  border: Border.all(
                    color: Colors.blue,
                    width: 2.0,
                  ),
                  borderRadius: BorderRadius.circular(15.0),
                ),
                child: Center(
                  child: Text(
                    'Container Border',
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
              SizedBox(height: 20),
              Material(
                elevation: 3.0,
                borderRadius: BorderRadius.circular(15.0),
                borderOnForeground: true,
                color: Colors.white,
                child: Container(
                  width: 150,
                  height: 150,
                  child: Center(
                    child: Text(
                      'Material Border',
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ),
              SizedBox(height: 20),
              Card(
                elevation: 3.0,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(15.0),
                  side: BorderSide(
                    color: Colors.red,
                    width: 2.0,
                  ),
                ),
                child: Container(
                  width: 150,
                  height: 60,
                  child: Center(
                    child: Text(
                      'Card Border',
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

output:

Post Views: 111