Horizontal divider with text in the middle in Flutter

Horizontal divider with text in the middle in Flutter?

Flutter is very flexible in term of its uses and UI. There can be UI requirement where we need to add a horizontal divider with text in middle in flutter. For example, on a login screen you may need to add horizontal divider with text between a login form and login with social platform such as Google, Facebook, Github, etc. 

Example Code

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    const Expanded(child: Divider()),
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 15),
      child: Text(
        "Or Continue With",
        style: Theme.of(context).textTheme.labelMedium,
      ),
    ),
    const Expanded(child: Divider()),
  ],
),

You can find the desire result as showing below screenshot. You can see text “or continue with” is horizontal divided with text in middle.

Horizontal divider with text in the middle in Flutter

For more details about text and divider you can follow the official Divider class.

Leave a Reply