Основы Flutter для начинающих (Часть VII)

Большинство мобильных приложений содержат различные картинки.

А как же без них? Картинки делают насыщенным и более понятным пользовательский интерфейс пользователя.

Flutter имеет встроенную поддержку картинок. Наиболее часто используемым является класс Image, который мы и рассмотрим в данной статье.

Ну что ж поехали!

Добавление картинок в проект

Для начала попробуем добавить собственные картинки в проект.

Будьте осторожнее: картинки добавленные в ваш проект увеличивают размер приложения, так что не переусердствуйте!

Для добавления картинок нам нужно создать новую директорию images в корне проекта:

Затем нужно прописать директорию images в файле pubspec.yaml:

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

Теперь добавим парочку изображений. Вы можете воспользоваться уже готовыми и взять их из Github’а:

Отредактируем нашу пустую страницу AlbumListPage:

 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]}"),         );       }, );    } }

Запускаем.

Вуаля! Получилось довольно забавно.

Картинки из сети

Пришло время воспользоваться REST API для получения картинок.

Возможно вы заметили, что наша страница называется AlbumListPage. На самом деле мы не будем выводить список альбомов, а потом делать переключение между ними, зато это будет хорошей практикой для вас.

Мы сразу выведем все картинки.

Для начала создадим модель Photo:

// данная модель очень похоже 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(); }

Добавляем новый метод в Repository:

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:

// 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("Нет интернета"));     }   }    }

Осталось только внести соответствующие изменения в AlbumListPage:

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!")),             ),           );         },        );     }   } }

Попробуем запустить.

Работает!

Заключение

Мы рассмотрели довольно базовые вещи, которые имеет Flutter для работы с картинками.

Image.network не является панацеей и поэтому в боевых проектах лучше использовать специальные библиотеки с большей функциональностью.

К одной из таких перспективных библиотек относится cached_network_image

Это довольно простая библотека, которая берет на себя все технические моменты и сложности.

Полезные ссылки:

• Ссылка на Github

• Image class

• Adding assets and images

Всем хорошего кода!