Grid-View-App - Grid View App For Flutter

Overview

grid_view_app

practice purpose flutter application

Getting Started

This project is a starting point for a Flutter application.

Basic Grid View UI Image

# GridView Widget 

GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 10,
        crossAxisSpacing: 5,
      ),
      itemCount: _imgList.length,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          height: 100,
          margin: EdgeInsets.zero,
          color: Colors.greenAccent,
          child: Image(
            image: NetworkImage(_imgList[index]),
            height: double.infinity,
            width: double.infinity,
            fit: BoxFit.cover,
          ),
        );
      },

    )

Staggered Grid View UI Image

# MasonryGridView Widget 

MasonryGridView.count(
      crossAxisCount: 2,
      mainAxisSpacing: 10,
      crossAxisSpacing: 5,
      itemCount: _imgList.length,
      itemBuilder: (context,index){
        var _height = Random().nextInt(200) + 150;
        return Card(
          shadowColor: Colors.lightGreenAccent.withOpacity(0.7),
          elevation: (Random().nextInt(20)+10).toDouble(),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15.0),

          ),
          child: Padding(
            padding:  EdgeInsets.all(8.0),
            child: Image(
              image: NetworkImage(_imgList[index]),
              height: _height.toDouble(),
              fit: BoxFit.cover,
            ),
          ),
        );
      },
    );

Sliver Grid View UI Image

# SliverGrid

CustomScrollView(
      slivers: [
          SliverGrid(
              delegate: SliverChildBuilderDelegate(
                  (context,index){
                    return ClipRRect(
                      borderRadius: BorderRadius.circular(25),
                        child: Image(
                          image: NetworkImage(_imgList[index]),
                          height: double.infinity,
                          width: double.infinity,
                          fit: BoxFit.cover,
                        ),
                    );
                  },
                childCount: _imgList.length,
              ),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  crossAxisSpacing: 7,
                mainAxisSpacing: 10,
              ),
          ),
      ],
    )

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

You might also like...

-UNDER DEVELOPMENT- a project built demonstrating model view view model architecture

mvvm_project A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

Nov 28, 2022

A periodic table app with 3D view of the elements built using flutter.

A periodic table app with 3D view of the elements built using flutter.

A flutter app which takes you on a 3d visualisation of the 118 elements of the periodic table. promo.mp4 Tech Stack Deployed using How it all began It

Nov 16, 2022

Search and view popular Youtube videos with Youtube API in Flutter App

Search and view popular Youtube videos with Youtube API in Flutter App

getx_bottom_nav_sample The sample of AnimatedBottomNavBar with GetX 주요 Package 설명 1.url_launcher url_launcher pub.dev flutter 에서 인앱, 외부 브라우저로 연길 시켜 주는

Dec 25, 2021

A Food App using Flutter & Firebase to post and view food blogs along with their recipes.

A Food App using Flutter & Firebase to post and view food blogs along with their recipes.

A Food App using Flutter 💕 & Firebase 🔥 About the App 🥘 FoodLab is a App to post and view food blogs along with their recipes if you want 🤤 ! Logi

Dec 24, 2022

A WEB 3 Exploration Flutter APP that let you view NFTS

A WEB 3 Exploration Flutter APP that let you view NFTS

It is simply a WEB 3 Exploration APP that let you view NFTS (News about web 3 ar

Nov 22, 2022

Multi-Camera-Dashboard - Flutter App to View RTSP Streams

Multi-Camera-Dashboard - Flutter App to View RTSP Streams

9.9.2021 update I have updated the firebase db to be read only due to abuse. The save operation works if you import your own firebase and modify proje

Jan 1, 2023

The ArDrive Web App allows a user to log in to securely view, upload and manage their ArDrive files.

ArDrive Web The ArDrive Web App allows a user to log in to securely view, upload and manage their ArDrive files. Have any questions? Join the ArDrive

Dec 14, 2022

App to quickly view the word by word meaning of an ayat

App to quickly view the word by word meaning of an ayat

quran_ayat_app_flutter App to quickly view the word by word meaning of an ayat Click here to access online Features Supports platforms like android, i

May 13, 2022

Flutter agenda - Flutter Agenda View Package (pub.dev)

Flutter agenda - Flutter Agenda View Package (pub.dev)

Flutter Agenda View Agenda Widget Package for Flutter Features Image Video Recor

Apr 15, 2022
Owner
Md Tarequl Islam
Md Tarequl Islam
A grid-based layout system for Flutter, inspired by CSS Grid Layout

Flutter Layout Grid A powerful grid layout system for Flutter, optimized for complex user interface design. Click images to see their code ✨ Featuring

Felt 307 Dec 24, 2022
Sticky Grid View For Flutter

Features Listing images in gridview wrapped listview gives bad performance (disp

null 1 Nov 14, 2022
Flutter package for displaying grid view of daily task like Github-Contributions.

flutter_annual_task flutter_annual_task Flutter package for displaying grid view of daily task like Github-Contributions. Example Usage Make sure to c

HuanSuh 24 Sep 21, 2022
UTS Mobile Programming membuat Grid view

uts_181021450006 A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

null 1 Mar 30, 2022
Gol grid - a cellular automata flutter widget

GolGrid Conway's Game of Life in a flutter widget. A GolGrid is a rendering of a GridWorld controlled by a Thumper. Example The example contains two a

Jeff Regan 4 Mar 25, 2022
Flutter widget that arrange buttons in a grid.

flutter_grid_button Flutter widget that arrange buttons in a grid. It is useful for making a number pad, calculator, and so on. Getting Started To use

zuvola 11 Jan 10, 2022
Create a Grid Layout of IoT (Internet of Things) devices in a particular house.

Create a Grid Layout of IoT (Internet of Things) devices in a particular house. Keep it simple to just 4-6 devices. Each device will have an icon on its own. When you press the icon, toggle the image and toggle the text underneath between on and off.

null 0 Dec 30, 2021
A grid that supports both dragging and tapping to select its items

drag_select_grid_view A grid that supports both dragging and tapping to select its items. Basic usage DragSelectGridView constructor is very similar t

Hugo Passos 121 Dec 11, 2022
Flutter list view - An unofficial list view for flutter

Flutter List View I don't like official list view. There are some features don't

null 24 Dec 15, 2022
Swipeable button view - Create Ripple Animated Pages With Swipeable Button View

swipeable_button_view You can create ripple animated pages with swipeable_button

cemreonur 3 Apr 22, 2022