FL

class CategoriesWidget extends StatefulWidget {
  @override
  _CategoriesWidgetState createState() => _CategoriesWidgetState();
}

class _CategoriesWidgetState extends State<CategoriesWidget> {
  int gridChildCount = 20;
  @override
  Widget build(BuildContext context) {
    // futureCategory = getCategoryList();
    // print(futureCategory);
    // APIServiceProvider  api = APIServiceProvider();
    // Future<List<AttributeModel>> attributesListFuture = api.getAttributes();
    // print(futureCategory.length);
    return SliverGrid(
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 200.0,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              childAspectRatio: 0.9,
            ),
            delegate: SliverChildBuilderDelegate(

          (BuildContext context,int index)
            {
              return FutureBuilder(
                future: getCategoryList(),
                builder: (context, AsyncSnapshot snapshot)
                {
                  List<CategoryModel> values = snapshot.data;
                  
                      return snapshot.connectionState == ConnectionState.done?
                       snapshot.hasData && (values.length > index)
                      ? 
                             GestureDetector(
                              // When the child is tapped, show a snackbar.
                              onTap: () {
                                Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                    builder: (context) {
                                      // Category: values[index]
                                      var productsScreen = ProductsScreen(category: values[index]);
                                      return productsScreen;
                                    },
                                  ),
                                );

                                // final snackBar = SnackBar(content: Text(values[index].name??= ''));

                                // Scaffold.of(context).showSnackBar(snackBar);
                              },
                            // The custom button
                            child: Card(
                                color: Colors.transparent,
                                elevation: 0,
                                child: Container(
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(20),
                                    image: DecorationImage(
                                      image: NetworkImage(values[index].image),
                                      fit: BoxFit.cover
                                    )
                                  ),
                                  child: Transform.translate(
                                    offset: Offset(0, 0),
                                    child: Container(
                                      width: MediaQuery.of(context).size.width / 2,
                                      height: MediaQuery.of(context).size.height / 2,
                                      margin: EdgeInsets.only(top:170,bottom:0),
                                      alignment: Alignment.center,
                                      // horizontal: 65, vertical: 63
                                      // height: 20,
                                      // width: ,
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(10),
                                        color: Colors.black.withOpacity(0.6)
                                      ),
                                      child:  Text(values[index].name??= '',
                                      style: TextStyle(
                                          color: Colors.white,
                                          fontFamily: 'Roboto-Light.ttf',
                                          fontWeight: FontWeight.bold,
                                          fontSize: 18)
                                          ),
                                          // Icon(Icons.bookmark_border, size: 15,),
                                    ),
                                  ),
                                ),
                              )
                              )
                      :  Center()//Text('Retry')

                  : Text('Loading...');

                },
                ); 
            },
            childCount: gridChildCount,
            )
          );
  }
}