layout 0.3.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 73

layout #

Build layouts with minimal coding.

Purpose and Usage #

The library offers a convenient shorthand for laying out complex, responsive layouts in Dart using Google's Flutter framework. Space is divided evenly between elements by default (dynamic flex argument soon to come), and the layout will change automatically depending on screen size (and orientation) with no work required by the code author.

For example, here is a responsive layout that covers the full width of the device screen. It shows two elements, side-by-side, and each taking up 50% of the screen width - the number 1 is displayed in the left box, the number 2 in the right.

new Expanded(
	child: new Row(
    	children: [
        	new Expanded(child: Column(children: [
            	new Text('1')
            ]),
            new Expanded(child: new Column(children: [
            	new Text('2')
            ])
        ]
    )
)

That's an awful lot of typing. With the layout library, it is as simple as:

new Layout([['1', '2']])

One set of brackets indicates rows. Two sets indicate columns.

Complicated Example #

This would take hundreds of lines to accomplish without the Layout library. #

This example includes the Cell class - it allows for easy specification of a layout element's padding and color, and also centers its contents by default (you can disable this by passing center: false). It accepts the same array-style metasyntax as the Layout class. Also demonstrated are several utilities offered by the library, such as automatic typecasting (numbers and strings are automatically converted to Text widgets), no use of the "child" parameter to save time.

As a bonus, it is possible to code your layout more visually using this array metasyntax - notice how the numbers 1, 2, 3... in the code sample were intentionally arranged in a way that is visually representative of what is displayed in the screenshots.

return Scaffold(
        appBar: AppBar(
          title: Text('Test'),
        ),
        body: Layout([  // Rows
          Cell([  // Rows
            1,
            '2'
          ], color: Colors.blue),
          Cell([[  // Columns
              '3', '4',
              Cell([  // Rows (as a column)
                '5',
                '6'
              ], padding: 32, color: Colors.blue)
            ]], color: Colors.red, padding: 16) 
        ]));

The included example (located in /example/) illustrates newly added flex functionality for Cell widgets and building stateful layouts.

Pull requests are encouraged. This package was developed to speed up UI design prototyping, and I am not a professional developer with the skills to maintain or tidy up this package. #

Portrait (Tablet) #

alt text

Landscape (Tablet) #

alt text

[0.0.1] - TODO: Add release date. #

  • TODO: Describe initial release.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:layout/layout.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _add = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Test'),
        ),
        body: Layout([
          // Rows
          Cell([
            // Rows
            1 + _add,
            '2'
          ], color: Colors.blue, flex: 2,),
          Cell([
            [
              // Columns
              '3', '4',
              Cell([
                // Rows (as a column)
                '5',
                '6'
              ], padding: 32, color: Colors.blue)
            ]
          ], color: Colors.red, padding: 16, flex: 2),
          Cell(RaisedButton(child: Text('PRESS ME'), onPressed: () => setState(() => _add += 1),)),
        ]));
  }
}

MaterialApp _myApp = MaterialApp(
  home: MyHomePage(),
);

void main() => runApp(_myApp);

Use this package as a library

1. Depend on it

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


dependencies:
  layout: ^0.3.0

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:layout/layout.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
47
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
98
Overall:
Weighted score of the above. [more]
73
Learn more about scoring.

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

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Maintenance suggestions

Package is getting outdated. (-2.47 points)

The package was last published 53 weeks ago.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test