Tag: Container

Border of Container Widget in Flutter

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

Flutter BoxShadow Tutorial

Flutter Banner Location Tutorial

Flutter Banner Widget Tutorial

Container Tutorial with Examples – Flutter

Container classes in flutter are convenient ways to combine common painting, positioning, and sizing of widgets.

A container can be used to store one or more widgets and position them on the screen according to our convenience. Basically, a container is like a box to hold its contents. A basic container element that stores a widget has a margin, which separates it from other contents.

The total container can have a border of different shapes, for example, rounded rectangles, etc. A container surrounds its child with padding and then applies additional constraints to the padded extent (including the width and height)

Syntax of Container Class given below

Container({Key key,
           AlignmentGeometry alignment, 
           EdgeInsetsGeometry padding, 
           Color color, 
           Decoration decoration, 
           Decoration foregroundDecoration, 
           double width, 
           double height, 
           BoxConstraints constraints, 
           EdgeInsetsGeometry margin, 
           Matrix4 transform, 
           Widget child, 
           Clip clipBehavior: Clip.none});

Here’s an example of using the Container class in Flutter:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Container Example'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            padding: EdgeInsets.all(16),
            margin: EdgeInsets.all(16),
            alignment: Alignment.center,
            child: Text(
              'Hello, World!',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

The Container class in Flutter provides a flexible and powerful way to manage the layout and appearance of UI elements.

It allows you to control dimensions, alignment, padding, margin, background color, and more. With its wide range of properties and customization options, the Container class is an essential widget for creating attractive and well-structured Flutter UIs.