Dokumentasi Simple Grid

package ini saya buat karena terinspirasi oleh bootstrap grid, tapi untuk break point setiap screen size, mengikuti material ui breakpoint. Tapi jangan khawatir, anda juga bisa membuat breakpoint sendiri, contohnya disini. Package ini full menggunakan mediaquery, jadi gausah khawatir masalah rendering yaa.

Buat anda yang kurang paham mengenai bootsrap grid. Bisa lihat penjelasan gambar dibawah.

Penggunaan

ada 4 class yang harus anda ketahui di package ini:

1. SpGrid merupakan container dari grid-grid yang akan dijabarkan. Selengkapnya disini

2. SpGridItem merupakan grid-grid yang bisa anda gunakan untuk mendeklarasikan seberapa besar grid-nya pada screen tertentu. Selengkapnya disini.

3. SpGridSize adalah class untuk mendeklarasikan maksimum screen anda (deklarasi breakpoint). Selengkapnya disini

4. SpOrder adalah class untuk pengurutan pada setiap screen. Selengkapnya disini

Jika ada pertanyaan silakan langsung tulis di issue github aja. Pakai bahasa Indonesia juga boleeh.

Simple Demo

contoh kode:

SpGrid(width: MediaQuery.of(context).size.width, children: [
  SpGridItem(
    xs: 12,
    sm: 6,
    md: 4,
    lg: 3,
    child: Container(
      color: Colors.blue,
      height: 200,
    ),
  ),
  SpGridItem(
    xs: 12,
    sm: 6,
    md: 4,
    lg: 3,
    child: Container(
      color: Colors.green,
      height: 200,
    ),
  ),
  SpGridItem(
    xs: 12,
    sm: 6,
    md: 4,
    lg: 3,
    child: Container(
      color: Colors.yellow,
      height: 200,
    ),
  ),
  SpGridItem(
    xs: 12,
    sm: 6,
    md: 4,
    lg: 3,
    child: Container(
      color: Colors.purple,
      height: 200,
    ),
  ),
]);

Order Demo

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple_grid',
      theme: ThemeData(
        brightness: Brightness.dark,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SIMPLE GRID EXAMPLE"),
      ),
      body: SpGrid(
        width: MediaQuery.of(context).size.width,
        spacing: 10,
        runSpacing: 10,
        children: [
          SpGridItem(
            xs: 12,
            md: 6,
            order: SpOrder(sm: 1, xs: 1),
            child: Container(
              height: 200,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    "Hello!",
                    style: TextStyle(fontSize: 40),
                    textAlign: TextAlign.center,
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text(
                    "I'm John Doe and I Love Programming",
                    style: TextStyle(fontSize: 25),
                    textAlign: TextAlign.center,
                  ),
                ],
              ),
            ),
          ),
          SpGridItem(
            xs: 12,
            md: 6,
            order: SpOrder(sm: 0, xs: 0),
            child: Container(
              height: 200,
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: NetworkImage(
                          "https://raw.githubusercontent.com/nggepe/simple_grid/master/doc/john.png"))),
            ),
          ),
        ],
      ),
    );
  }
}

Kustomisasi Breakpoint

SpGrid(
  width: MediaQuery.of(context).size.width,
  gridSize: SpGridSize(xs: 0, sm: 500, md: 768, lg: 980, xl: 1200),
  children:[],
)