How to add a border to a widget in Flutter?

Contents

Do you want to add a border to a widget like a container, card e.t.c in flutter? If yes then you can add it using the BoxDecoration(). Inside the BoxDecoration() you have to use the border attribute.

Here you will learn how to add a border to container and text using the BoxDecoration().

The first step is to create a Container that allows you to add the BoxDecoration() in it. Add the below lines of code.

Center(
          child: Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(color: Colors.amber),
          ),
        ),

Output

Step 2: Add some text

Add some text inside the container.

Center(
          child: Container(
            alignment: Alignment.center,
            width: 100,
            height: 100,
            child: Text(
              "Okay",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
            decoration: BoxDecoration(color: Colors.amber),
          ),
        ),

Step 3: Add border

Here I will add a border for the Container using the border attribute.

Center(
          child: Container(
            alignment: Alignment.center,
            width: 100,
            height: 100,
            child: Text(
              "Okay",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
            decoration: BoxDecoration(
                color: Colors.amber,
                border: Border.all(color: Colors.red, width: 3)),
          ),
        ),

Full Code

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'My Flutter App',
      debugShowCheckedModeBanner: false, // Remove debug banner
      home: Scaffold(
        appBar: AppBar(
          // The title text which will be shown on the action bar
          title: Text("My Flutter App"),
        ),
        body: Center(
          child: Container(
              alignment: Alignment.center,
              width: 100,
              height: 100,
              child: Text(
                "Okay",
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
              decoration: BoxDecoration(
                  color: Colors.amber,
                  border: Border.all(color: Colors.red, width: 3))),
        ),
      ),
    );
  }
}

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

Output

In the same way, you can add a border for any widget. But make sure you can use the border inside the Container() widget only. So always wrap other widget with the Container() widget.

Container(
  child: AnyOtherWidget()
)

Source:
Flutter Container

Step 1: Create a Container Widget

Step 2: Add some text

Step 3: Add border