flutter_grid_template 0.0.5

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';  
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',  
],  

Or both

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:

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

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

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 flutter_grid_template.dart. Packages with multiple examples should provide example/README.md.

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.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.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