In Flutter, the Container widget is a flexible and popular widget for developing unique user interfaces. Widgets can be styled and embellished using a variety of characteristics, including alignment, padding, margin, colour, and more.
Setting borders around the Container widget is one of its frequently utilised features. With detailed instructions and examples, we’ll look at how to apply borders to a Container widget in Flutter in this blog post.
To get started, make sure you have Flutter installed on your machine. If not, refer to the official Flutter installation guide for instructions. Create a new Flutter project on Android Studio Software.
Navigate to the newly created project directory and open it in your preferred code editor.
The lib/main.dart File
import 'package:flutter/material.dart';
void main() => runApp(BorderApp());
class BorderApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Main Border Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: BorderExample(),
);
}
}
class BorderExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Container with Border Example'),
),
body: Center(
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
border: Border.all(
color: Colors.red,
width: 2.0,
),
),
child: Text(
'Container with Border',
textAlign: TextAlign.center,
),
),
),
);
}
}
You should see a simple application with an app bar and a centered Container widget.
The Container has a red border with a width of 2.0 pixels and contains a centered text that says “Container with Border”.
Explanation
In the code above, we create a new Flutter application named BorderApp. Inside the BorderExample widget, we use a Container widget to create a rectangular container with a specified width and height.
The decoration property of the Container is set to a BoxDecoration that includes a Border with specific properties. We set the border color to red and the border width to 2.0 pixels.
The child of the Container is a Text widget, which is centered using the TextAlign.center property.
Conclusion
Adding borders to a Container widget in Flutter is a simple and effective way to enhance the visual appeal of your user interfaces.
By leveraging the decoration property and the Border class, you can easily customize the appearance of your Container with different border colors, widths, and styles.
Experiment with the provided example and explore further possibilities to create stunning UI designs in your Flutter applications.
Remember, the Container widget offers many other properties and features that can be combined with borders to achieve even more complex and beautiful designs. Happy coding!
Related Posts
Flutter Column Explained – Tutorial
Flutter Progress Indicators Tutorial
Flutter Center Widget Tutorial