Новостное приложение с Flutter

novostnoe-prilozhenie-flutter

Это приложение для трех действий, одно для Home, News Feed и одно для Full Story.

Давайте посмотрим на структуру проекта

В папке lib находится файл с именем constants.dart в каталоге lib.

Flutter App Development Flutter App Development Flutter App Development

Для получения бесплатного API Key of news API, пожалуйста, посетите https://newsapi.org

Добавьте библиотеки для проекта в файл pubspec.yaml и сохраните файл.

Flutter App Development

Здесь используется flutter_webview_plugin для показа полной новостной истории (Full News Story). Этот плагин используется как веб-представление в терминах Android.

На экране Home используется Grid view, и в ней – карточку в качестве дочернего виджета, оборачиваем карточку в детектор жестов для события onTap на карточке.

Flutter App Development

После того, как приложение во вкладке перейдет на страницу новостных лент (News Feed), где мы найдем последние новости из нашего API новостей, здесь мы собираемся проанализировать ответ json API здесь, для этого мы должны запросить API и проанализировать ответ api.

Flutter App Development

Как только мы получим ответ от API, самое время анализировать ответ API для этого мы будем использовать метод типа List.

Flutter App Development

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

Flutter App Development

После того, как у модели появилось время для генерации списка заголовков. Здесь мы серьезно посмотрели на вкладку, в которой была пропущена URL заголовок на странице новостей «Full Story». Для навигации по страницам мы используем MaterialPageRoute.

Flutter App Development

Итак, мы в конце нашего приложения проделали хорошую работу, теперь настало время рассказать вашему пользователю полную историю новостей. Здесь мы создадим файл description.dart.

Flutter App Development

На этом приложение заканчивается. Мы сейчас создали приложение.


.

  • May 26, 2020