Flutter – Divider Widget with Example
Divider widget is used when you have multiple child and want to separate by the line or divider. A sample image is given below to get an idea about what we are going to do in this article.
How to Use?
Divider( height: 100, color: Colors.green, thickness: 1, indent : 10, endIndent : 10, ),
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the material package
Adding material package that gives us the important functions and calls the runApp method in the main function that will call our application.
import 'package:flutter/material.dart'; void main() { runApp(RunMyApp()); }
Step 3: Creating Stateless Widget
Now we have to make a stateless widget because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more.
class RunMyApp extends StatelessWidget { const RunMyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp(); } }
Step 4: Creating Scaffold Widget
Give the home property and there can be a scaffold widget that has the property of AppBar and body. AppBar allows us to give the title of AppBar, color, leading, and trailing icon.
home: Scaffold( appBar: AppBar( title: Text('Divider Widget'), ), body:
Step 5: Use the Divider widget, where you can give it height, color, thickness, indent, endindent
Divider( height: 100, color: Colors.green, thickness: 1, ),
Final Code
Dart
import 'package:flutter/material.dart' ; void main() { runApp(RunMyApp()); } class RunMyApp extends StatelessWidget { const RunMyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false , theme: ThemeData(primarySwatch: Colors.green), home: Scaffold( appBar: AppBar( title: Text( 'Divider Widget' ), ), body: Column( children: [ Text( 'Divider' ), Divider( height: 100, color: Colors.green, thickness: 1, ), Text( 'Divider' ), Divider( height: 100, color: Colors.green, thickness: 1, ), ], ), ), ); } } |
Output:
You also give it padding from both sides using the indent and endindent parameters.
Dart
import 'package:flutter/material.dart' ; void main() { runApp(RunMyApp()); } class RunMyApp extends StatelessWidget { const RunMyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false , theme: ThemeData(primarySwatch: Colors.green), home: Scaffold( appBar: AppBar( title: Text( 'Divider Widget' ), ), body: Column( children: [ Text( 'Divider' ), Divider( height: 100, color: Colors.green, thickness: 1, indent: 20, endIndent: 20, ), ], ), ), ); } } |