Flutter News App Using BLoC Pattern

Flutter News App

The project is Developed using the Test Driven Development and Flutter BLoC pattern. News App developed with Flutter, Flutter Bloc and API from News API.

What is Bloc

BLoC is a very powerful and flexible state management pattern for flutter applications.BLoC is very well suited for larger and more complex applications. There are some kinds of widgets provided by the flutter bloc pattern which helps to manage the app.

Bloc Widgets

BlocBuilder

It’s a flutter widget that needs a bloc and a builder function. it is responsible for building the widgets according to Bloc States. BlocBuilder is very similar to StreamBuilder but it has provided simple APIs to reduce the time of development. You can make it like the below code

BlocBuilder<BlocA, BlocAState>(
  builder: (context, state) {
    // return widget here based on BlocA's state
  }
)

BlocProvider

BlocProvider is used for providing bloc to its children using *BlocProvider.of<T>(context)*. BlocProvider used as dependency injection which helps to provide single instance of a bloc to the multiple widgets within a subtree.
You can make it like below.

BlocProvider(
  create: (BuildContext context) => BlocA(),
  child: ChildA(),
);

MultiBlocProvider 
A Flutter Widget which is used to merge multiple BlocProvider within it.
You can make it like below

BlocProvider<BlocA>(
  create: (BuildContext context) => BlocA(),
  child: BlocProvider<BlocB>(
    create: (BuildContext context) => BlocB(),
    child: BlocProvider<BlocC>(
      create: (BuildContext context) => BlocC(),
      child: ChildA(),
    )
  )
)

BlocListener
This is a Flutter widget which helps us to listen states of the bloc and accordingly we can manage our code. When there is functinality which is going to used once then only we should use like showing Snackbar, Navigate to Other Page, Loading Bar etc.
You can make it like below code

BlocListener<BlocA, BlocAState>(
  listener: (context, state) {
    // do stuff here based on BlocA's state
  },
  child: Container(),
)

You can visit below link for more understanding of BLoC pattern.

See also  News app using Flutter Bloc Pattern

https://pub.dev/packages/flutter_bloc

Learn about chatgpt projects. click here

Versions

Usage

  1. Please open file constant_config.dart and change YOUR API KEY in the variable keyNewsApi with your own.
  2. In development mode, I’m used fake json server. So, the data is not realtime.
  3. Build flavor only work for Android. So, if you want to run as development mode you can use this command
    flutter run -t lib/main_development.dart --flavor development -d
  4. or in production mode.
    flutter run --release -t lib/main_production.dart --flavor production -d
  5. Note: If you want to build and release this app to Play Store. Please use this command.
    flutter build appbundle --release --flavor production -t lib/main_production.dart
  6. For iOS, you can use this command as development mode.
    flutter run -t lib/main_development.dart -d
    or in production mode.
    flutter run --release -t lib/main_production.dart -d
    For iOS, to build and release there is no configuration. Just follow the instructions from the documentation.
See also  Flutterzon - Amazon Clone Flutter Using Bloc

Feature

  •  List daily news.
  •  Filter daily news by category.
  •  Refresh list daily news with pull to refresh style.
  •  Go to detail news website.
  •  Search news.
  •  Dark mode support.

Technology

  1. Dio
    A powerful Http client for Dart, which supports interceptors, FormData, Request Cancellation, File Downloading, Timeout, etc.
  2. Flutter BLoC
    Flutter widgets that make it easy to implement the BLoC design pattern.
  3. Intl
    Package providers internationalization and localization facilities, including message translation, plurals and genders, date/number formatting and parsing, and bidirectional text.
  4. Url Launcher
    Flutter plugin for launching a URL in the mobile platform. Supports iOS and Android.
  5. Cached Network Image
    Flutter library to load and cache network images. Can also be used with placeholder and error widgets.
  6. Get It
    Simple direct Service Locator that allows to decouple the interface from a concrete implementation and to access the concrete implementation from everywhere in your App.
  7. Dartz
    Functional Programming in Dart. Purify your Dart code using efficient immutable data structures, monads, lenses and other FP tools.
  8. Equatable
    An abstract class that helps to implement equality without needing to explicitly override == and hashCode.
  9. Data Connection Checker
    A pure Dart library that checks for internet by opening a socket to a list of specified addresses, each with individual port and timeout.
  10. Flutter ScreenUtil
    A Flutter plugin for adapting screen and font size.
  11. Pedantic
    How to get the most value from Dart static analysis.
  12. Device Info
    Flutter plugin providing detailed information about the device (make, model, etc).
  13. Flutter SVG
    An SVG rendering and widget library for Flutter, which allows painting and displaying Scalable Vector Graphics 1.1 files.
  14. Build Runner
    Tools to write binaries that run builders.
  15. Mockito
    A mock framework inspired by Mockito.
  16. Bloc Test
    A testing library which makes it easy to test blocs.
  17. JSON Serializable
    Automatically generate code for converting to and from JSON by annotating Dart classes.
  18. Hive
    Lightweight and blazing fast key-value database written in pure Dart.
See also  Flutter food delivery app using GetX

Credit

This project was developed by CoderJava
Download this project from the below link.
https://github.com/CoderJava/Flutter-News-App/archive/refs/heads/master.zip
You can visit original source page from the below link.
https://github.com/CoderJava/Flutter-News-App

Spread the love

Leave a Reply