How can I give a border to the container in Flutter?
When I was designing a user interface for an application for messaging, I needed to create a chat bubble for the incoming messages. For this particular purpose, I have decided to use a container to show each message. How would I apply a border around the container so that it can look attractive and differentiate between background and bubbles?
In the context of mobile development or application development there is an easy way named “decoration” property and the “BoxDecoration” class for bordering the “container”.
Here is the example given of how you can create a birder around the bubble of chat for income messages in your messaging application:-
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(‘Incoming Messages’),
),
Body: Center(
Child: Padding(
Padding: EdgeInsets.all(8.0),
Child: Container(
Padding: EdgeInsets.all(12.0),
Decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0), // Optional: Add rounded corners
border: Border.all(
color: Colors.blue, // Choose your desired border color
width: 1.5, // Choose your desired border width
),
),
Child: Text(
‘Hey! How are you?’,
Style: TextStyle(fontSize: 16.0),
),
),
),
),
),
);
}
}This above code will wrapped with “padding” to the “container” so that it can have some space. Then the “box decoration” would define the border with your desired color, width, and optional rounded corners if you want.