CategoryDetail

class CategoryDetail extends StatefulWidget {
  final Category category;

  CategoryDetail(this.category);

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

class _CategoryDetailState extends State<CategoryDetail> {
  final String pathImage = apiURLimg;
  String id;
  String nextPage = apiUrlClients;

  ScrollController _scrollController = ScrollController();
  bool isLoading = false;

  List clients = List();
  Dio dio = Dio();

  void _getMoreData() async {
    print(apiUrlClients + "${widget.category.id}");
    if (!isLoading) {
      setState(() {
        isLoading = true;
      });

      final clientURL = apiUrlClients + "${widget.category.id}";
      final response = await dio.get(clientURL);
      List tempList = List();
      nextPage = response.data['next_page_url'];

      for (int i = 0; i < response.data['data'].length; i++) {
        tempList.add(response.data['data'][i]);
      }

      setState(() {
        isLoading = false;
        clients.addAll(tempList);
      });
    }
  }

  /* Future getData() async {
    final res = await dio.get(apiURL+'${widget.category.id}');
    data = json.decode(res.data);
    clientData = data[''];
    debugPrint(clientData.toString());
  } */

  @override
  void initState() {
    this._getMoreData();
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        _getMoreData();
      }
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  Widget _buildProgressIndicator() {
    return new Padding(
      padding: const EdgeInsets.all(8.0),
      child: new Center(
        child: new Opacity(
          opacity: isLoading ? 1.0 : 00,
          child: new CircularProgressIndicator(),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('${widget.category.name}'),
      ),
      body: _gridview(),
      resizeToAvoidBottomPadding: false,
    );
  }

  _gridview() {
    return ListView.builder(
      /* gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 1,
        childAspectRatio: 1.9,
        mainAxisSpacing: 1), */
      itemCount: clients.length + 1,
      controller: _scrollController,
      itemBuilder: (context, i) {
        if (i == clients.length) return _buildProgressIndicator();
        return GestureDetector(
          onTap: () {},
          child: Container(
            height: 60,
            decoration: BoxDecoration(
              color: RED,
            ),
            child: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [SEA_DEEP.withOpacity(.2), SEA_DEEP],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                ),
                image: DecorationImage(
                    image: NetworkImage("${clients[i]['image']}"),
                    fit: BoxFit.cover),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    "${clients[i]['name']}".toUpperCase(),
                    style: TextStyle(
                        color: ICE, fontSize: 22, fontWeight: FontWeight.w700),
                    softWrap: true,
                    textAlign: TextAlign.center,
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}