Horizontal Divider Line With Text Beetween View In Flutter App

admin_img Posted By Bajarangi soft , Posted On 10-09-2020

Flutter has given us a inbuilt widget named as Divider which is used to create horizontal divider line between views. Sometimes we have seen a Login form where the Sign In form present first then the OR text in middle of horizontal line and just the below the OR text we have seen a Sing in With Google or Sign in With Facebook button.

Horizontal Divider Line With Text Beetween View In Flutter App

Complete Code FOr Horizontal Divider Line With Text Beetween View In Flutter

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              centerTitle:true,
              backgroundColor:Colors.pink,
              title: Text('Create Divider Line Between Views'),
            ),
            body: Center(
                child: Column(
                    children: <Widget>[
                      Column(
                        children: <Widget>[
                          Padding(
                              padding: const EdgeInsets.all(12.0),
                              child: Text('Hello Word',
                                  style: TextStyle(fontSize: 18))),],
                      ),

                      Row(children: <Widget>[
                        Expanded(
                          child: new Container(
                              margin: const EdgeInsets.only(left: 10.0, right: 15.0),
                              child: Divider(
                                color: Colors.black,
                                height: 50,
                              )),
                        ),

                        Text("OR"),

                        Expanded(
                          child: new Container(
                              margin: const EdgeInsets.only(left: 15.0, right: 10.0),
                              child: Divider(
                                color: Colors.black,
                                height: 50,
                              )),
                        ),
                      ]),

                      Column(
                        children: <Widget>[Padding(
                            padding: const EdgeInsets.all(12.0),
                            child: Text('Loreum Ipsum',
                                style: TextStyle(fontSize: 18))),],
                      ),

                    ]))));
  }
}

Related Post