How can I add a border to a widget in Flutter?

Border widget in flutter is a simple functionality to add borders in widget. We can create borders using BorderSide. This second way is by using borders. All to create a uniform border having some color and width. The fourth way is by using Border. symmetry to make look symmetrical vertically and horizontally of mobile application.

Different border mentioned below

Constructor of Border Class:

const Border(
   {
     BorderSide top: BorderSide.none,
     BorderSide right: BorderSide.none,
     BorderSide bottom: BorderSide.none,
     BorderSide left: BorderSide.none
   }
)

Constructor of Border.all:

 Border.all(
 {
   Color color: const Color(0xFF000000),
   double width: 1.0,
   BorderStyle style: BorderStyle.solid
  }
 )

Constructor of Border.fromBorderSide:

 const Border.fromBorderSide(
     BorderSide side
 )

Constructor of Border. symmetry:

 const Border.symmetric(
  {
   BorderSide vertical: BorderSide.none,
   BorderSide horizontal: BorderSide.none
  }
 )

Here is the step by step Implementation process:

Step 1:Create a new project in the Flutter project or you can use an already created Flutter project.

Step 2: When loading a Flutter project at time first call the main method that will call our application.

Step 3: Below code write in Homescreen.dart in lib folder

 import 'package:flutter/material.dart';

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      home: ExtendedFAB(),
    );
  }
 }

 class ExtendedFAB extends StatefulWidget {
   @override
   _ExtendedFABState createState() => _ExtendedFABState();
 }

 class _ExtendedFABState extends State<ExtendedFAB> {
   bool showOptions = false;

   void toggleOptions() {
    setState(() {
      showOptions =
          !showOptions; // Toggling the visibility of additional options
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Border Example'),
      ),
      body:Center(
    child: Padding(
    padding: const EdgeInsets.all(12.0),
    child: SizedBox(
    height: 50,
    child: Container(
      padding: new EdgeInsets.all(10.0),
        child: Text(
          'Candidroot solutions',
          style: TextStyle(fontSize: 24),
        ),
    decoration: BoxDecoration(    border: Border(
      top: BorderSide(
          width: 2,
          color: Colors.black,
          style: BorderStyle.solid), 
      bottom: BorderSide(
          width: 2,
          color: Colors.black,
          style: BorderStyle.solid), 
      left: BorderSide(
          width: 2,
          color: Colors.black,
          style: BorderStyle.solid), 
      right: BorderSide(
          width: 2,
          color: Colors.black,
          style: BorderStyle.solid), 
     )  )
     )
     )
     )
       ),

     );
   }
 }

Step 4: Output of above example

Happy coding!

in Mobile

365Bloggy May 27, 2024

How can I add a border to a widget in Flutter?

Constructor of Border Class:

Constructor of Border.all:

Constructor of Border.fromBorderSide:

Constructor of Border. symmetry:

Here is the step by step Implementation process:

Step 1:Create a new project in the Flutter project or you can use an already created Flutter project.

Step 2: When loading a Flutter project at time first call the main method that will call our application.

Step 3: Below code write in Homescreen.dart in lib folder

Step 4: Output of above example

Share this post

Tags

SUBSCRIBE THIS FORM

Recent Posts

Our blogs

Archive

Follow us