graphql_flutter practice

main.dart

import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

void main() {
  const String link = "https://test.podkadeh.ir/graphql";
  final HttpLink httpLink = HttpLink(link);

  ValueNotifier<GraphQLClient> client = ValueNotifier(
    GraphQLClient(
      link: httpLink,
      cache: GraphQLCache(
        store: InMemoryStore(),
      ),
    ),
  );

  runApp(
    GraphQLProvider(
      client: client,
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter GraphQL Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: MoreEpd(
        moreId: "6183ece57ea65dbf75211437",
      ),
    );
  }
}

class MoreEpd extends StatefulWidget {
  final String moreId;
  const MoreEpd({Key? key, required this.moreId}) : super(key: key);

  @override
  _MoreEpdState createState() => _MoreEpdState();
}

class _MoreEpdState extends State<MoreEpd> {
  double pageWidth = 0;
  double pageHeigh = 0;
  int pageNum = 0;

  final String leftArrow = 'assets/icons/left-arrow.svg';
  String getSearchResult = r'''
     query homeview( $moreId: ID!, $page: Int! ){
        homeview(HM_ID: $moreId, page: $page){
        HM_ID
        HM_Type_ID
        HM_Type_Name
        HM_NAME
        Priority
        Details{
          HM_Det_ID
          HM_ID
          Ep_ID
          Pod_ID
          Link
          Image
          title
          Pod_title
          
        }
      }
    }
   ''';

  var data = [];

  final ScrollController controller = ScrollController();
  bool isLoading = false;

  @override
  void initState() {
    super.initState();
    controller.addListener(() {
      /// load date at when scroll reached -100
      if (controller.position.pixels >
          controller.position.maxScrollExtent - 100) {
        print("Scroll on loading");
        if (!isLoading) {
          print("fetching");
          setState(() {
            pageNum++;
            isLoading = true;
          });
        }
      }
    });
  }

  @override
  void dispose() {
    controller.removeListener(() {});
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    print("rebuilding");
    pageWidth = MediaQuery.of(context).size.width;
    pageHeigh = MediaQuery.of(context).size.height;
    return Query(
      options: QueryOptions(
        document: gql(getSearchResult),
        variables: {'moreId': widget.moreId, 'page': pageNum},
      ),
      builder: (
        QueryResult result, {
        Refetch? refetch,
        FetchMore? fetchMore,
      }) {
        if (result.hasException) {
          return Text(result.exception.toString());
        }
        if (result.isLoading) {
          isLoading = false;
          return Column(
            children: [
              Expanded(
                  child: handleResult(
                data,
                controller: controller,
              )), // show data while loading
              const Center(
                child: CircularProgressIndicator(),
              ),
            ],
          );
        }
        data.addAll(result.data!['homeview']['Details'] ?? []);
        return handleResult(
          data,
          controller: controller,
        );
      },
    );
  }

  Widget handleResult(
    var data, {
    required ScrollController controller,
  }) {
    return ListView.builder(
        controller: controller,
        addAutomaticKeepAlives: true,
        padding: EdgeInsets.only(top: 15),
        shrinkWrap: true,
        itemCount: data.length,
        itemBuilder: (context, index) {
          return InkWell(
            onTap: () {},
            child: Padding(
              padding: EdgeInsets.only(
                  top: pageWidth * 0.0,
                  right: pageWidth * 0.08,
                  left: pageWidth * 0.08,
                  bottom: pageWidth * 0.0),
              child: Container(
                child: Stack(
                  children: [
                    Column(
                      children: [
                        Padding(
                          padding: EdgeInsets.only(bottom: pageWidth * 0.060),
                          child: Row(
                            children: [
                              Padding(
                                padding:
                                    EdgeInsets.only(left: pageWidth * 0.01),
                                child: Container(
                                  // alignment: Alignment.centerRight,
                                  width: pageWidth * 0.128,
                                  height: pageWidth * 0.128,
                                  decoration: BoxDecoration(
                                      // image: DecorationImage(
                                      //     fit: BoxFit.cover,
                                      //     image: NetworkImage(
                                      //       data[index]['Image'],
                                      //     )),
                                      borderRadius:
                                          BorderRadius.all(Radius.circular(15)),
                                      // color: Colors.redAccent,
                                      border: Border.all(
                                        // color: MyColors.lightGrey,
                                        width: 1,
                                      )),
                                ),
                              ),
                              Expanded(
                                child: Row(
                                  children: [
                                    Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Container(
                                          width: pageWidth * 0.5,
                                          alignment: Alignment.centerRight,
                                          child: Text(
                                            data[index]['title'],
                                            textAlign: TextAlign.right,
                                            overflow: TextOverflow.ellipsis,
                                            maxLines: 1,
                                            // softWrap: true,
                                            style: TextStyle(
                                              // fontWeight: FontWeight.bold,
                                              fontSize: 14,
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          );
        });
  }
}