How to add a border to only one part of the container in Flutter?

This Article is posted by seven.srikanth at 12/6/2018 1:23:54 AM

Make money by writing articles for Fluttercentral. Reach to me at srilovesflutter@gmail.com with your content or for more details.



In this article, I'm going to show you how to add a border to only one or a few parts of the container in Flutter?
  
This is how the final output is going to look.
This can be achieved by adding a decoration to the container as below.
 decoration: BoxDecoration(
          border: Border(
            top: BorderSide(width: 16.0, color: Colors.lightBlue.shade600),
            bottom: BorderSide(width: 16.0, color: Colors.lightBlue.shade900),
          ),
          color: Colors.white,
        ),
However, h ere is the complete code to achieve this from main.dart file,
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Text(
          "This is a Boder with One Side",
          textDirection: TextDirection.ltr,
          style: TextStyle(color: Colors.black),
        ),
        padding: EdgeInsets.symmetric(vertical: 100.0, horizontal: 100.0),
        decoration: BoxDecoration(
          border: Border(
            top: BorderSide(width: 16.0, color: Colors.lightBlue.shade600),
            bottom: BorderSide(width: 16.0, color: Colors.lightBlue.shade900),
          ),
          color: Colors.white,
        ),
      ),
    );
  }
}

Here is a quick video for the same. Subscribe to my channel for more videos on flutter. 
Thanks,
Srikanth

Tags: How to add a border to only one part of the container in Flutter?; border class; borderside class;






Make money by writing articles for Fluttercentral. Reach to me at srilovesflutter@gmail.com with your content or for more details.






1 Comments
Login to comment.
Recent Comments

xitex34014 at 5/8/2021

<a href="https://pub.dev/packages/dotted_border">dotted_border | Flutter Package - Pub.dev</a>

Login to Reply.


Search Results





©2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com