First GET API Calling with Bloc in Flutter

 import "package:api_with_bloc/First_Get_API_call_using_Bloc/blocs/app_bloc.dart";

import "package:api_with_bloc/First_Get_API_call_using_Bloc/blocs/app_events.dart";
import "package:api_with_bloc/First_Get_API_call_using_Bloc/blocs/app_states.dart";
import "package:api_with_bloc/First_Get_API_call_using_Bloc/repository/repositories.dart";
import "package:api_with_bloc/First_Get_API_call_using_Bloc/screens/detail_screen.dart";
import "package:flutter/material.dart";
import "package:flutter_bloc/flutter_bloc.dart";

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "HomeScreen",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.grey,
          centerTitle: true,
        ),
      ),
      home: RepositoryProvider(
        create: (context) {
          return UserRepository();
        },
        child: const HomeScreen(),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) {
        return UserBloc(
          RepositoryProvider.of<UserRepository>(context),
        )..add(LoadUserEvent());
      },
      child: Scaffold(
        appBar: AppBar(
          title: const Text("The Bloc App"),
        ),
        body: BlocBuilder<UserBloc, UserState>(
          builder: (context, state) {
            if (state is UserLoadingState) {
              return const Center(
                child: CircularProgressIndicator(),
              );
            } else if (state is UserLoadedState) {
              var userList = state.users;
              return ListView.builder(
                itemCount: userList.data!.length,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 10.0),
                    child: InkWell(
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) {
                              return DetailScreen(
                                e: userList,
                              );
                            },
                          ),
                        );
                      },
                      child: Card(
                        child: ListTile(
                          title:
                              Text(userList.data![index].firstName.toString()),
                          subtitle:
                              Text(userList.data![index].lastName.toString()),
                          trailing: CircleAvatar(
                            backgroundImage: NetworkImage(
                                userList.data![index].avatar.toString()),
                          ),
                        ),
                      ),
                    ),
                  );
                },
              );
            } else if (state is UserErrorState) {
              return Center(
                child: Text(
                  state.errormsg,
                  style: const TextStyle(
                      fontWeight: FontWeight.bold, fontSize: 20.0),
                ),
              );
            }
            return Container();
          },
        ),
      ),
    );
  }
}

import "package:api_with_bloc/First_Get_API_call_using_Bloc/blocs/app_events.dart";
import "package:api_with_bloc/First_Get_API_call_using_Bloc/blocs/app_states.dart";
import "package:api_with_bloc/First_Get_API_call_using_Bloc/repository/repositories.dart";
import "package:flutter_bloc/flutter_bloc.dart";

class UserBloc extends Bloc<UserEvent, UserState> {
  final UserRepository _userRepository;

  UserBloc(this._userRepository) : super(UserLoadingState()) {
    on<LoadUserEvent>(
      (event, emit) async {
        emit(UserLoadingState());
        try {
          final users = await _userRepository.getUsers();
          emit(UserLoadedState(users));
        } catch (e) {
          emit(UserErrorState(e.toString()));
        }
      },
    );
  }
}

abstract class UserEvent {}

class LoadUserEvent extends UserEvent {}

import 'package:api_with_bloc/First_Get_API_call_using_Bloc/Model/user_model.dart';

abstract class UserState {}

/// data loading state
class UserLoadingState extends UserState {}

/// data loaded state
class UserLoadedState extends UserState {
  UserLoadedState(this.users);

  // final List<UserModel> users;
  final UserModel users;
}

/// data error loading state
class UserErrorState extends UserState {
  final String errormsg;

  UserErrorState(this.errormsg);
}

class UserModel {
  int? page;
  int? perPage;
  int? total;
  int? totalPages;
  List<Data>? data;
  Support? support;

  UserModel(
      {this.page,
      this.perPage,
      this.total,
      this.totalPages,
      this.data,
      this.support});

  UserModel.fromJson(Map<String, dynamic> json) {
    page = json['page'];
    perPage = json['per_page'];
    total = json['total'];
    totalPages = json['total_pages'];
    if (json['data'] != null) {
      data = <Data>[];
      json['data'].forEach((v) {
        data!.add(new Data.fromJson(v));
      });
    }
    support =
        json['support'] != null ? new Support.fromJson(json['support']) : null;
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['page'] = this.page;
    data['per_page'] = this.perPage;
    data['total'] = this.total;
    data['total_pages'] = this.totalPages;
    if (this.data != null) {
      data['data'] = this.data!.map((v) => v.toJson()).toList();
    }
    if (this.support != null) {
      data['support'] = this.support!.toJson();
    }
    return data;
  }
}

class Data {
  int? id;
  String? email;
  String? firstName;
  String? lastName;
  String? avatar;

  Data({this.id, this.email, this.firstName, this.lastName, this.avatar});

  Data.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    email = json['email'];
    firstName = json['first_name'];
    lastName = json['last_name'];
    avatar = json['avatar'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['email'] = this.email;
    data['first_name'] = this.firstName;
    data['last_name'] = this.lastName;
    data['avatar'] = this.avatar;
    return data;
  }
}

class Support {
  String? url;
  String? text;

  Support({this.url, this.text});

  Support.fromJson(Map<String, dynamic> json) {
    url = json['url'];
    text = json['text'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['url'] = this.url;
    data['text'] = this.text;
    return data;
  }
}


import "dart:convert";
import "package:api_with_bloc/First_Get_API_call_using_Bloc/Model/user_model.dart";
import "package:http/http.dart" as http;
import "package:http/http.dart";

class UserRepository {
  String endpoint = "https://reqres.in/api/users?page=2";

  Future getUsers() async {
    Response response = await http.get(
      Uri.parse(endpoint),
    );

    if (response.statusCode == 200) {
      final result = jsonDecode(response.body);
      print(response.body);
      return UserModel.fromJson(result);
    } else {
      throw Exception(response.reasonPhrase);
    }
  }
}

import "package:api_with_bloc/First_Get_API_call_using_Bloc/Model/user_model.dart";
import "package:flutter/material.dart";

class DetailScreen extends StatelessWidget {
  const DetailScreen({super.key, required this.e});

  final UserModel e;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Center(
                child: CircleAvatar(
                  maxRadius: 60.0,
                  backgroundImage: NetworkImage(e.data![0].avatar.toString()),
                ),
              ),
              const SizedBox(height: 50.0),
              Text(
                e.data![0].firstName.toString() +
                    " " +
                    e.data![0].lastName.toString(),
                style: const TextStyle(
                    fontWeight: FontWeight.bold, fontSize: 30.0),
              ),
              Text(
                e.data![0].email.toString(),
                style: const TextStyle(
                    fontWeight: FontWeight.bold, fontSize: 20.0),
              ),
            ],
          ),
        ),
      ),
    );
  }
}