GridView with Dynamic Height for Flutter. No Need to Specify AspectRatio To The Grid.

dynamic_height_grid_view

GridView with dynamic height. No need to use aspectRatio.

Usage 

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DynamicHeightGridView(
        itemCount: 120,
        crossAxisCount: 3,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        builder: (ctx, index) {
          /// return your widget here.
        }
      ),
    );
  }
}
  • Use SliverDynamicHeightGridView for CustomScrollView

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add dynamic_height_grid_view

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  dynamic_height_grid_view: ^0.0.4

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:dynamic_height_grid_view/dynamic_height_grid_view.dart';

example/lib/main.dart

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

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

final colors = [
  Colors.red,
  Colors.redAccent,
  Colors.deepOrange,
  Colors.orange,
  Colors.amberAccent,
  Colors.yellow,
  Colors.lightGreenAccent,
  Colors.lightGreen,
  Colors.green,
  Colors.greenAccent,
  Colors.lightBlueAccent,
  Colors.blue,
];

final heights = [
  100,
  120,
  140,
  160,
  180,
  200,
];

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const SliverMyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DynamicHeightGridView(
        itemCount: 120,
        crossAxisCount: 3,
        builder: (ctx, index) {
          colors.shuffle();
          heights.shuffle();
          return Container(
            height: heights.first.toDouble(),
            color: colors.first,
          );
        },
      ),
    );
  }
}

class SliverMyHomePage extends StatelessWidget {
  const SliverMyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverDynamicHeightGridView(
            itemCount: 16,
            crossAxisCount: 3,
            builder: (ctx, index) {
              colors.shuffle();
              heights.shuffle();
              return Container(
                height: heights.first.toDouble(),
                color: colors.first,
              );
            },
          )
        ],
      ),
    );
  }
}

Download details:

Author: bookm.me

Source: https://github.com/santa112358/dynamic_height_grid_view

#flutter #android #ios

GridView with Dynamic Height for Flutter. No Need to Specify AspectRatio To The Grid.
1.10 GEEK