Flutter Add Border To Container Widget with Background Color

To add border on container widget with background color we have to define BoxDecoration() property of Decoration. This will allow us to add border on container and also we can define border color and border width.

Flutter Add Border To Container Widget with Background Color:

1. Creating Container widget with BoxDecoration() to set border.

Code Explanation:

• color: Color property of Box decoration is used to set background color of Container if we're using border around it.
• Border.all : Inside border all function color parameter is used to set color of border and width parameter is used to set width of border.

Container(
          width: 200,
          height: 150,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: Colors.yellow,
            border: Border.all(color: Colors.red, width: 3.2),
          ),
          child: const Text(
            'Text',
            style: TextStyle(fontSize: 22, color: Colors.black),
            textAlign: TextAlign.center,
          )),

2. Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
      child: Container(
          width: 200,
          height: 150,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: Colors.yellow,
            border: Border.all(color: Colors.red, width: 3.2),
          ),
          child: const Text(
            'Text',
            style: TextStyle(fontSize: 22, color: Colors.black),
            textAlign: TextAlign.center,
          )),
    ))));
  }
}

Screenshot: