Flutter GridView with out model

import 'package:flutter/material.dart';

import 'dart:convert';

void main() => runApp(MainApp());

class MainApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Grid View',

      home: HomePage(),

      debugShowCheckedModeBanner: false,

    );

  }

}

class HomePage extends StatefulWidget {

  @override

  _HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Grid View'),

        centerTitle: true,

      ),

      body: JobsListView(),

    );

  }

}

class JobsListView extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return FutureBuilder<List<dynamic>>(

      future: _fetchData(),

      builder: (BuildContext context, AsyncSnapshot snapshot) {

        if (snapshot.hasData) {

          return GridView.builder(

            itemCount: snapshot.data.length,

            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

              crossAxisCount: 2,

            ),

            itemBuilder: (BuildContext context, int index) {

              return Text('haraloar');

            },

          );

        } else {

          return Center(

            child: CircularProgressIndicator(),

          );

        }

      },

    );

  }

  Future<List> _fetchData() async {

    var jsonData = {

      "marketing pack": [

        {

          "name": "Future Decision",

          "description": "Description about future",

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img2.png",

          "category": "marketing pack"

        },

        {

          "name": "Future Decision",

          "description": "Description about future",

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img2.png",

          "category": "marketing pack"

        }

      ],

      "kids people": [

        {

          "name": "horoscope makeing",

          "description": null,

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img4.png",

          "category": "kids people"

        }

      ],

      "elderpeople": [

        {

          "name": "tarot reading",

          "description": "tarot reding here",

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img4.png",

          "category": "elderpeople"

        },

        {

          "name": "tarot reading",

          "description": "tarot reding here",

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img4.png",

          "category": "elderpeople"

        },

        {

          "name": "tarot reading",

          "description": "tarot reding here",

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img4.png",

          "category": "elderpeople"

        },

        {

          "name": "tarot reading",

          "description": "tarot reding here",

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img4.png",

          "category": "elderpeople"

        },

        {

          "name": "tarot reading",

          "description": "tarot reding here",

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img4.png",

          "category": "elderpeople"

        },

        {

          "name": "tarot reading",

          "description": "tarot reding here",

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img4.png",

          "category": "elderpeople"

        },

        {

          "name": "tarot reading",

          "description": "tarot reding here",

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img4.png",

          "category": "elderpeople"

        },

        {

          "name": "tarot reading",

          "description": "tarot reding here",

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img4.png",

          "category": "elderpeople"

        },

        {

          "name": "tarot reading",

          "description": "tarot reding here",

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img4.png",

          "category": "elderpeople"

        },

        {

          "name": "tarot reading",

          "description": "tarot reding here",

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img4.png",

          "category": "elderpeople"

        },

        {

          "name": "tarot reading",

          "description": "tarot reding here",

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img4.png",

          "category": "elderpeople"

        },

        {

          "name": "tarot reading",

          "description": "tarot reding here",

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img4.png",

          "category": "elderpeople"

        },

        {

          "name": "tarot reading",

          "description": "tarot reding here",

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img4.png",

          "category": "elderpeople"

        },

        {

          "name": "tarot reading",

          "description": "tarot reding here",

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img4.png",

          "category": "elderpeople"

        },

        {

          "name": "tarot reading",

          "description": "tarot reding here",

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img4.png",

          "category": "elderpeople"

        },

        {

          "name": "tarot reading",

          "description": "tarot reding here",

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img4.png",

          "category": "elderpeople"

        },

        {

          "name": "tarot reading",

          "description": "tarot reding here",

          "img":

              "http://dev2.yigserver.com/apps/fortune/public/images/img/img4.png",

          "category": "elderpeople"

        }

      ]

    };

    List jsonDatax = [];

    var json = jsonEncode(jsonData);

    Map<String, dynamic> decoded = jsonDecode(json);

    for (var key in decoded.keys) {

      for (var item in decoded[key]) {

        jsonDatax.add(item);

      }

    }

    return jsonDatax;

  }

}

Share on Google Plus

About Ram Pukar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.