# блок зависимостей
dependencies:
  flutter:
    sdk: flutter
  # ...
# зависимости для разработки
dev_dependencies:
  # ...
# в данной секции вы можете подключить шрифты и assets файлы
flutter:
  # указываем, что мы используем MaterialApp иконки и наше
  # приложение соответствует Material Design
  uses-material-design: true
  # прописываем директорию images
  # / указывает на то, что мы собираемся включить
  # все файлы которые будут в директории images
  assets:
    - images/

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
class AlbumListPage extends StatefulWidget {
  @override
  _AlbumListPageState createState() => _AlbumListPageState();
}
class _AlbumListPageState extends State<AlbumListPage> {
  // указываем список наших изображений
  final fileImages = [
    "applejack.png",
    "fluttershy.png",
    "rarity.png",
    "starlight_glimmer.png",
    "twillight_sparkle.png"
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Album List Page"),
        ),
        body: _buildContent()
    );
  }
  // мы собираемся построить сетку из изображений
  Widget _buildContent() {
    // ранее мы уже подключали пакет flutter_staggered_grid_view
    // который содержит StaggeredGridView
    return StaggeredGridView.countBuilder(
      // количество изображений
      itemCount: fileImages.length,
      // crossAxisCount задает количество колонок
      // по которым будут выравнены изображения
      crossAxisCount: 8,
      // отступы по вертикали
      mainAxisSpacing: 10,
      // отступы по горизонтали
      crossAxisSpacing: 10,
      staggeredTileBuilder: (index) {
        // каждое изображение будет 4 колонки в ширину (первый параметр)
        // изображения на четных индексах будут в 2 раза меньше (второй параметр)
        return StaggeredTile.count(4, index % 2 == 0 ? 4 : 8);
      },
      // строим изображение
      itemBuilder: (context, index) {
        return Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.pinkAccent, width: 1)
          ),
          // Image.asset используется для отображения
          // изображений которые мы прописали в pubspec.yaml
          // помимо asset класс Image имеет другие методы
          child: Image.asset("images/${fileImages[index]}"),
        );
      },
);
  }
}

// данная модель очень похоже Post
class Photo {
  final int _id;
  final String _title;
  final String _url;
  Photo.fromJson(Map<String, dynamic> json) :
      _id = json["id"],
      _title = json["title"],
      _url = json["url"];
}
class PhotoList {
  final List<Photo> photos = [];
  PhotoList.fromJson(List<dynamic> jsonItems) {
    for (var jsonItem in jsonItems) {
      photos.add(Photo.fromJson(jsonItem));
    }
  }
}
abstract class PhotoResult {}
class PhotoResultSuccess extends PhotoResult {
  final PhotoList photoList;
  PhotoResultSuccess(this.photoList);
}
// произошла ошибка
class PhotoResultFailure extends PhotoResult {
  final String error;
  PhotoResultFailure(this.error);
}
// загрузка данных
class PhotoResultLoading extends PhotoResult {
  PhotoResultLoading();
}

Future<PhotoList> fetchPhotos() async {
  // сначала создаем URL, по которому
  // мы будем делать запрос
  final url = Uri.parse("$SERVER/photos");
  // делаем GET запрос
  final response = await http.get(url);
  // проверяем статус ответа
  if (response.statusCode == 200) {
    // если все ок то возвращаем все картинки
    // json.decode парсит ответ
    return PhotoList.fromJson(json.decode(response.body));
  } else {
    // в противном случае вызываем исключение
    throw Exception("failed request");
  }
}

// AlbumController очень поход на PostController
class AlbumController extends ControllerMVC {
  final Repository repo = Repository();
  // текущее состояние
  PhotoResult currentState = PhotoResultLoading();
  void init() async {
    try {
      // получение картинок
      final photoList = await repo.fetchPhotos();
      // успешно
      setState(() => currentState = PhotoResultSuccess(photoList));
    } catch (error) {
      // произошла ошибка
      setState(() => currentState = PhotoResultFailure("Нет интернета"));
    }
  }
}

class AlbumListPage extends StatefulWidget {
  @override
  _AlbumListPageState createState() => _AlbumListPageState();
}
class _AlbumListPageState extends StateMVC {
  // добавляем наш контроллер
  // late указывает на отложенную инициализацию
  late AlbumController _controller;
  _AlbumListPageState() : super(AlbumController()){
    _controller = controller as AlbumController;
  }
  @override
  void initState() {
    super.initState();
    // получаем картинки из JSONPlaceholder
    _controller.init();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Album List Page"),
        ),
        body: _buildContent()
    );
  }
  Widget _buildContent() {
    // получение текущего состояния
    final state = _controller.currentState;
    if (state is PhotoResultLoading) {
      // загрузка
      return Center(
        child: CircularProgressIndicator(),
      );
    } else if (state is PhotoResultFailure) {
      // ошибка
      return Center(
        child: Text(
            state.error,
            textAlign: TextAlign.center,
            style: Theme.of(context).textTheme.headline4!.copyWith(color: Colors.red)
        ),
      );
    } else {
      final images = (state as PhotoResultSuccess).photoList.photos;
      // мы используем StaggeredGridView для построения
      // кастомной сетки из изображений
      return StaggeredGridView.countBuilder(
        // количество изображений
        itemCount: images.length,
        // crossAxisCount задает количество колонок
        // по которым будут выравнены изображения
        crossAxisCount: 8,
        // отступы по вертикали
        mainAxisSpacing: 10,
        // отступы по горизонтали
        crossAxisSpacing: 10,
        staggeredTileBuilder: (index) {
          // каждое изображение будет в ширину 4 колонки (первый параметр)
          // изображения на четных индексах будут в 2 раза меньше (второй параметр)
          return StaggeredTile.count(4, index % 2 == 0 ? 4 : 8);
        },
        // строим изображение
        itemBuilder: (context, index) {
          return Container(
            decoration: BoxDecoration(
                border: Border.all(color: Colors.pinkAccent, width: 1)
            ),
            // мы используем метод Image.network для
            // отображения картинок из сети
            child:  Image.network(
              images[index].url,
              // указываем максимальную ширину и высоту
              width: double.infinity,
              height: double.infinity,
              // указываем масштабирование изображения
              fit: BoxFit.cover,
              // при загрузки изображения
              // будет показан текст Loading...
              loadingBuilder: (context, widget, imageChunkEvent) {
                if (imageChunkEvent == null) {
                  return widget;
                }
                return Center(child: Text("Loading..."));
              },
              // при возникновении ошибки
              // вместо изображения будет текст Error!
              errorBuilder: (context, obj, stacktrace) => Center(child: Text("Error!")),
            ),
          );
        },
      );
    }
  }
}