Flutter Grid Template #
This is a plugin for flutter inspired in the CSS grid template.
It consists of two Widgets GridTemplate and GridTemplateResponsive.
and every cell is a container that holds your widget.
The main idea is to help you create a responsive flutter app without the need to use a completely different widget for different screen sizes.
Import the package #
To use this plugin, follow the plugin installation instructions.
Use the plugin #
Add the following import to your Dart code:
GridTemplate( debugPaint: true, template: [ 'logo header', 'leftContent rightContent', ], rowsSize: '30% 70%', columnsSize: '2fr 1fr', children: <Widget>[ Text( 'Logo Area', key: Key('logo'), ), Text( 'header Area', key: Key('header'), ), Text( 'Left Content Area', key: Key('leftContent'), ), Text( 'Right Content Area', key: Key('rightContent'), ), ], );
Row and Column Size #
It's important to notice that you have to put a space between the sizes to specify each row and each column.
Row and Column Size Types Examples #
fr - stands for fraction,
50% - for half of the parent
30 - raw flutter size
Note - Fraction and percentages will consider raw size taking the remaining space as 100%.
Row and Column Span #
To use a span you just need to repeat the key inside the template properties
For row span
template: [ 'title title', 'sub3 sub4', ],
For column span
template: [ 'title sub1', 'title sub4', ],
template: [ 'title title', 'title title', ],
For GridTemplateResponsive #
You need to pass a TemplateSelector that you can use it to pass the
maxWidth that each template will work. so if the screen size changes your template you change accordingly.
GridTemplateResponsive( debugPaint: true, templates: [ TemplateSelector( template: [ 'test1 test2 test3', 'test4 test5 test6', ], columnsSize: '50 50% 50%', rowsSize: '50% 50%', maxWidth: 1024, ), TemplateSelector( template: [ 'test1 test2', 'test3 test3', 'test4 test5', 'test6 test6', ], columnsSize: '50 100%', rowsSize: '1fr 1fr 1fr 1fr', maxWidth: 768, ), ], children: <Widget>[ Text( 'Text 1', key: Key('test1'), ), Text( 'Text 2', key: Key('test2'), ), Text( 'Text 3', key: Key('test3'), ), Text( 'Text 4', key: Key('test4'), ), Text( 'Text 5', key: Key('test5'), ), Text( 'Text 6', key: Key('test6'), ), ], )
Issues and feedback #
Please file issues
to send feedback or report a bug. Thank you!
[0.0.5] - 03/12/2020.
- Adding debugPaint to the Readme File
[0.0.4] - 03/12/2020.
- Adding debugPaint
[0.0.3] - 02/12/2020.
- Updating readme
[0.0.2] - 02/12/2020.
- Removing background auto coloring and updting readme
[0.0.1] - 02/12/2020.
- TODO: Describe initial release.
Use this package as a library
1. Depend on it
Add this to your package's pubspec.yaml file:
dependencies: flutter_grid_template: ^0.0.5
2. Install it
You can install packages from the command line:
$ 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:flutter_grid_template/grid_template.dart'; import 'package:flutter_grid_template/grid_template_responsive.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]
We analyzed this package on Feb 14, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
- Dart: 2.7.1
- pana: 0.13.5
- Flutter: 1.12.13+hotfix.7
Maintain an example. (-10 points)
Create a short demo in the
example/ directory to show how to use this package.
Common filename patterns include
flutter_grid_template.dart. Packages with multiple examples should provide
For more information see the pub package layout conventions.
Package is pre-v0.1 release. (-10 points)
While nothing is inherently wrong with versions of
0.0.*, it might mean that the author is still experimenting with the general direction of the API.
The package description is too short. (-8 points)
Add more detail to the
description field of
pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.