directional_layout 1.0.3

  • Readme
  • Changelog
  • Installing
  • 68

Directional Layouts #

A lightweight version of the more robust Layout library. Create symmetric, fully responsive layouts with ease.

Getting Started #

VerticalLayout and HorizontalLayout are effectively just shortcuts for Columns and Rows with MainAxisSize.max and set by default, and each of the provided is wrapped in an Expanded widget. The SetFlex widget can be used to give the Expanded widgets a flex other than 1, which is the default.

This allows for quick implementation of flex-based layouts.

Notes It is recommended to set the resizeToAvoidBottomInset: false flag for Scaffolds containing DirectionalLayout widgets to prevent resizing the entire UI when a keyboard is opened.

In the example below, the UI is divided into 3 sections using flex: true in a DirectionalLayout parent, and the middle SignInSection widget given flex 2 using SetFlex wrapper. VerticalShrink is a helper widget that prevents the child (expanded inside a Column) from stretching vertically.

This example contains the GoogleSignInButton widget and static methods from the Login package.

class SignInSection extends StatelessWidget {  
  final email = TextEditingController();  
  final password = TextEditingController();  
  Widget build(BuildContext context) {  
    return Card(  
      child: VerticalLayout(  
        padding: 16,  
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
        children: [  
              controller: email,  
              keyboardType: TextInputType.emailAddress,  
              decoration: InputDecoration(labelText: "Email")),  
              controller: password,  
              obscureText: true,  
              decoration: InputDecoration(labelText: "Password")),  
            mainAxisAlignment: MainAxisAlignment.spaceBetween,  
            children: [  
                child: Text("No account? Register"),  
                onPressed: () => debugPrint("Register tapped."),  
                child: Text("Login"),  
                onPressed: () => Login.signInWithEmail(  
                    email: email, password: password, context: context),  

class HerculesLogin extends StatelessWidget {  
  Widget build(BuildContext context) {  
    return SafeArea(  
        child: VerticalLayout(children: [  
          VerticalLayout(children: [  
            HorizontalLayout(children: [  
              Image.asset("images/hercules_logo.png", height: 48),  
                  style: TextStyle(  
                    fontWeight: FontWeight.w300,  
                    fontSize: 48,  
                    color: darkBlue,  
            Text("The world's first realtime remote workplace.",  
                style: TextStyle(  
                  fontSize: 16,  
            child: SignInSection(),  
            flex: 2,  
            padding: 16,  
            child: GoogleSignInButton(),  
        flex: true,  


[0.0.1] - TODO: Add release date. #

  • TODO: Describe initial release.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  directional_layout: ^1.0.3

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:directional_layout/directional_layout.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jul 12, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart


  • directional_layout that is a package requiring null.

Health suggestions

Format lib/directional_layout.dart.

Run flutter format to format lib/directional_layout.dart.

Maintenance suggestions

Maintain an example. (-10 points)

Create a short demo in the example/ directory to show how to use this package.

Common filename patterns include main.dart, example.dart, and directional_layout.dart. Packages with multiple examples should provide example/

For more information see the pub package layout conventions.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies