flutter_grid_template

Description:

flutter grid template

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.
Usage #
Import the package #
To use this plugin, follow the plugin installation instructions.
Use the plugin #
Add the following import to your Dart code:
import 'package:flutter_grid_template/grid_template.dart';
copied to clipboard
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'),
),
],
);
copied to clipboard

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',
],
copied to clipboard
For column span
template: [
'title sub1',
'title sub4',
],
copied to clipboard
Or both
template: [
'title title',
'title title',
],
copied to clipboard
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'),
),
],
)
copied to clipboard


Issues and feedback #
Please file issues
to send feedback or report a bug. Thank you!