Flutter ListView.builder 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: (context, snapshot) {
        if (snapshot.hasData) {
          return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(snapshot.data[index]['name'],
                      style: TextStyle(
                        fontWeight: FontWeight.w500,
                        fontSize: 20,
                      )),
                  subtitle: snapshot.data[index]['description'] == null
                      ? null
                      : Text(snapshot.data[index]['category']),
                  leading: Icon(
                    Icons.work,
                    color: Colors.blue[500],
                  ),
                );
              });
        } else if (snapshot.hasError) {
          return Text("${snapshot.error}");
        }
        return 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"
        }
      ]
    };
    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.
    Blogger Comment

0 comments:

Post a Comment