Flutter ListView Example using Http 

















userslist.dart


=============








1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103


import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class UsersList extends StatefulWidget {
  static String tag = 'users-page';

  @override
  State<StatefulWidget> createState() {
       return new _UsersListState();
  }
}

class _UsersListState extends State<UsersList> {
  @override
  Future<List<User>> _getUsers() async {
    List<User> users = [];
    var response = await http.get('https://api.randomuser.me/?results=20');

    var jsonData = JSON.decode(response.body);

    var usersData = jsonData["results"];

    for (var user in usersData) {
      User newUser = User(user["name"]["first"] + user["name"]["last"],
          user["email"], user["picture"]["large"], user["phone"]);

      users.add(newUser);
    }

    return users;
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text('Users',
              style:
                  TextStyle(color: Colors.white, fontWeight: FontWeight.bold))),
      body: Container(
        child: FutureBuilder(
            future: _getUsers(),
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if (snapshot.data == null) {
                return Container(
                  child: Center(
                    child: Text("Loading..."),
                  ),
                );
              } else {
                return ListView.builder(
                    itemCount: snapshot.data.length,
                    itemBuilder: (BuildContext context, int index) {
                      return ListTile(
                        onTap: () {
                          Navigator.push(
                              context,
                              new MaterialPageRoute(
                                  builder: (context) =>
                                      UserDetailPage(snapshot.data[index])));
                        },
                        title: Text(snapshot.data[index].fullName),
                        subtitle: Text(snapshot.data[index].mobileNumber),
                        leading: CircleAvatar(
                            backgroundImage:
                                NetworkImage(snapshot.data[index].imageUrl)),
                      );
                    });
              }
            }),
      ),
    );
  }
}

class User {
  final String fullName;

  final String email;

  final String imageUrl;

  final String mobileNumber;

  User(this.fullName, this.email, this.imageUrl, this.mobileNumber);
}

class UserDetailPage extends StatelessWidget {
  final User user;

  UserDetailPage(this.user);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(user.fullName),
      ),
    );
  }
}




















main.dart


==========










1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Users',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.lightBlue
      ),
      home: UsersList()
     
    );
  }
}





















































Comments









  1. rachelecadenasMarch 3, 2022 at 8:25 AM
    Wynn Las Vegas and Encore Resort - JM Hub
    Book your stay at 용인 출장마사지 Wynn 군포 출장안마 Las Vegas and Encore Resort, two luxury hotel 대전광역 출장안마  of the largest casinos in Las Vegas, 부산광역 출장마사지 Las 당진 출장샵 Vegas, Nevada.
    ReplyDelete











Post a Comment































Popular posts from this blog









Flutter ListView Search




















Image







            contactslist.dart  ================      1   2   3   4   5   6   7   8   9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  31  32  33  34  35  36  37  38  39  40  41  42  43  44  45  46  47  48  49  50  51  52  53  54  55  56  57  58  59  60  61  62  63  64  65  66  67  68  69  70  71  72  73  74  75  76  77  78  79  80  81  82  83  84  85  86  87  88  89  90  91  92  93  94  95  96  97  98  99 100 101 102 103 104 105 106  class  ContactsList  extends  StatefulWidget {   static  String  tag =  'contactlist-page' ;    @ override  State < StatefulWidget >  createState() {        return  new  _ContactsListState();   } }  List < Contact >  contacts =  [   Contact( fullName:  'Pratap Kumar' , email:  'pratap@example.com' ),   Contact( fullName:  'Jagadeesh' , email:  'Jagadeesh@example.com' ),   Contact( fullName:  'Srinivas' , email:  'Srinivas@example.com' ),   Contact( ful








Read more










Flutter Navigation Drawer Example




















Image







                            main.dart   =========     import  'package:flutter/material.dart' ; import  'package:akeepo/navdrawer.dart' ; void  main() =>  runApp(MyApp());  class  MyApp  extends  StatelessWidget {     @ override  Widget build(BuildContext context) {     return  MaterialApp(       title:  'Flutter' ,       debugShowCheckedModeBanner:  false ,       theme:  ThemeData(         primarySwatch:  Colors.blue,        ),       home:  NavDrawer(),      );   } }            navdrawer.dart  ================     import  'package:flutter/material.dart' ;  class  NavDrawer  extends  StatefulWidget {   @ override  _NavDrawerState createState() =>  _NavDrawerState(); }  class  _NavDrawerState  extends  State < NavDrawer >  {   @ override  Widget build(BuildContext context) {     return  Scaffold(       appBar:  AppBar( title:  Text( "Nav Drawer" )),       drawer:  new  Drawer(         child:  new  ListView(           children:  < 








Read more










Swipe RecyclerView using AndroidSwipeLayout




















Image







Android Swipe Layout This will be the most powerful Android swipe UI component   In one of my Project, I have a requirement to create a Swiping Layout For RecyclerView. I looked for different Libraries. I found this Great Library Android Swipe Layout. I have tried this Library for RecyclerView. I have done sample Project using this great Library. This Library Supports ListView and GridView also. Thanks to the Author for Creating this useful Library: https://github.com/daimajia/ Library Link : https://github.com/daimajia/AndroidSwipeLayout/ Wiki Page: https://github.com/daimajia/AndroidSwipeLayout/wiki Step: 1 ====== Add dependency to your build.gradle file 1 2 3 4 dependencies {     compile 'com.daimajia.swipelayout:library:1.2.0@aar'     } Step: 2 ====== Create a row for RecyclerView using SwipeLayout 1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60








Read more