imagini/web_native/lib/screens/home_screen.dart

import 'package:flutter/material.dart';

import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

import 'package:imagini/blocs/home_bloc.dart';
import 'package:imagini/core/app_provider.dart';
import 'package:imagini/graphql/imagini_graphql.dart';

class HomeScreen extends StatefulWidget {
  static const String PATH = '/Home';

  HomeScreen({Key key}) : super(key: key);

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

class _HomeScreenState extends State<HomeScreen> {

  HomeBloc bloc;

  @override
  Widget build(BuildContext context) {
    _init();

    return PlatformScaffold(
      body: _buildGridView(),
      bottomNavBar: _buildNavBar()
    );
  }

  void _init(){
    if(bloc != null)
        return;

    bloc = HomeBloc(AppProvider.getApplication(context));
    // bloc.mediaItemsResult.listen((bool status) {
    // });
  }

  @override
  void dispose() {
    super.dispose();
    // bloc.dispose();
  }

  Widget _buildNavBar() {
    return PlatformNavBar(
        currentIndex: 0,
        itemChanged: (index) => setState(
          () {
            // _selectedTabIndex = index;
            print(index);
          },
        ),
        items: [
          BottomNavigationBarItem(
            label: "Gallery",
            icon: Icon(PlatformIcons(context).collections),
          ),
          BottomNavigationBarItem(
            label: "Me",
            icon: Icon(PlatformIcons(context).person),
          ),
          BottomNavigationBarItem(
            label: "Settings",
            icon: Icon(PlatformIcons(context).settings),
          ),
        ],
      );
  }

  Widget _buildGridView() {
    // return GridView.builder(
    //   itemCount: 5,
    //   gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
    //                       childAspectRatio: (1 / 1),
    //                       crossAxisCount: 2),
    //   itemBuilder: (BuildContext context, int index) {
    //      return _buildCard("https://i.imgur.com/CgSGqUz.jpeg");
    //   }
    // );


    // return new StaggeredGridView.countBuilder(
    //   crossAxisCount: 4,
    //   itemCount: 80,
    //   itemBuilder: (BuildContext context, int index) => _buildCard("https://i.imgur.com/CgSGqUz.jpeg"),
    //   // itemBuilder: (BuildContext context, int index) => new Container(
    //   //     color: Colors.green,
    //   //     child: new Center(
    //   //       child: new CircleAvatar(
    //   //         backgroundColor: Colors.white,
    //   //         child: new Text('$index'),
    //   //       ),
    //   //     )),
    //   staggeredTileBuilder: (int index) =>
    //       // new StaggeredTile.count(2, index.isEven ? 2 : 1),
    //       new StaggeredTile.fit(2),
    //   mainAxisSpacing: 4.0,
    //   crossAxisSpacing: 4.0,
    // );

    return StreamBuilder<MediaItems$Query>(
      stream: bloc.mediaItemsResult,
      builder: (context, snapshot) {
        if (snapshot.data == null)
          return _appLoading();

        List<MediaItems$Query$MediaItemResponse$MediaItem> allItems = snapshot.data.mediaItems.data;

        return new StaggeredGridView.countBuilder(
          crossAxisCount: 4,
          itemCount: allItems.length,
          itemBuilder: (BuildContext context, int index) {
            String fileName = allItems[index].fileName;
            print(fileName);
            return _buildCard("https://i.imgur.com/CgSGqUz.jpeg");
          },
          staggeredTileBuilder: (int index) =>
              // new StaggeredTile.count(2, index.isEven ? 2 : 1),
              new StaggeredTile.fit(2),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
        );
      }
    );
  }

  Widget _appLoading(){
    return Center(
      child: ConstrainedBox(
        constraints: BoxConstraints(maxWidth: 500),
        child: Container(
          margin: EdgeInsets.fromLTRB(50, 0, 50, 0),
          height: 270,
          child: Column(
            children: <Widget>[
              Container(
                child: FittedBox(
                  fit: BoxFit.contain,
                  child: const FlutterLogo(),
                ),
                width: 175,
                margin: EdgeInsets.fromLTRB(0, 0, 0, 50),
              ),
              PlatformCircularProgressIndicator()
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildCard(charImageUrl) {
    return new Image.network(
      charImageUrl,
      headers: {},
      fit: BoxFit.contain,
    );
  }
}