Building a Movie Database App in Flutter
Last Updated :
23 Jul, 2025
In this tutorial, we'll create a Flutter app that fetches movie data from an API, displays details such as ratings and reviews, and allows users to save their favorite movies locally using SQLite. This Application will demonstrate API integration, state management, and local data persistence.
Application Features
- Search for movies by name or genre.
- View detailed movie information (cast, plot, rating, etc.).
- Save and retrieve favorite movies locally.
What API is used in the Application
For this app, we’ll use the OMDb API to fetch movie data. OMDb is a free API that provides movie information like titles, posters, IMDb ratings, etc. You can get an API key from OMDb after signing up.
Setting Up the Project
Creating the Flutter Project
Create a new Flutter application using the command Prompt. To create a new app, write the below command and run it.
flutter create app_name
To know more about it refer this article: Creating a Simple Application in Flutter
Installing Dependencies
For this project, you’ll need these dependencies:
- http: To make network requests to the OMDb API.
- sqflite and path_provider : To save and manage favorite movies in a local SQLite database.
Add these dependencies in your pubspec.yaml file:
Dart
dependencies:
flutter:
sdk: flutter
http:
sqflite:
path_provider:
Run the following command to install the dependencies:
flutter pub get
Folder Structure
Create the following folder structure for better organization of your files:
This structure keeps database logic, models, services, and UI separated, making the code modular and easy to maintain.
Build the Application
The Application is divided into the following packages:
- Models: Contains Objects that encapsulate the data and behavior of the application domain.
- UI elements: These Contain Code that defines the UI of the Application.
- API Services: It contains the code able to maintain the API Services
- Database Helper: This part helps us to manage data in our local storage(SQLite).
Step 1 : Models
Let's start by creating a model for our movie data in movie.dart.
movie.dart
movie.dart
class Movie {
// Movie properties
final String imdbID;
final String title;
final String year;
final String poster;
final String type;
// Constructor to initialize the Movie object.
Movie({
required this.imdbID,
required this.title,
required this.year,
required this.poster,
required this.type,
});
// Creates a Movie object from a JSON map.
factory Movie.fromJson(Map<String, dynamic> json) {
return Movie(
imdbID: json['imdbID'],
title: json['Title'],
year: json['Year'],
poster: json['Poster'],
type: json['Type'],
);
}
// Converts the Movie object into a map.
Map<String, dynamic> toMap() {
return {
'imdbID': imdbID,
'title': title,
'year': year,
'poster': poster,
'type': type,
};
}
}
Now create another Model movie_details.dart; .this will store the movie details.
movie_details.dart
movie_details.dart
class MovieDetails {
// MovieDetails properties
final String title;
final String year;
final String rated;
final String released;
final String genre;
final String director;
final String actors;
final String plot;
final String poster;
final String imdbRating;
// Constructor to initialize the MovieDetails object.
MovieDetails({
required this.title,
required this.year,
required this.rated,
required this.released,
required this.genre,
required this.director,
required this.actors,
required this.plot,
required this.poster,
required this.imdbRating,
});
// Creates a MovieDetails object from a JSON map.
factory MovieDetails.fromJson(Map<String, dynamic> json) {
return MovieDetails(
title: json['Title'],
year: json['Year'],
rated: json['Rated'],
released: json['Released'],
genre: json['Genre'],
director: json['Director'],
actors: json['Actors'],
plot: json['Plot'],
poster: json['Poster'],
imdbRating: json['imdbRating'],
);
}
}
Step 2 : API Service
Create the movie_service.dart file to handle the API calls using the http package.
movie_service.dart
movie_service.dart
import 'dart:convert';
import 'dart:developer';
import 'package:http/http.dart' as http;
import 'package:movies/models/movie.dart';
import 'package:movies/models/movie_details.dart';
class MovieService {
// Replace with your OMDb API key.
final String apiKey = "API_KEY";
// Fetches a list of movies based on the search query.
Future<List<Movie>> fetchMovies(String searchQuery) async {
final response = await http.get(
Uri.parse('http://www.omdbapi.com/?s=$searchQuery&apikey=$apiKey'),
);
if (response.statusCode == 200) {
// Decodes the JSON response and extracts
// the 'Search' list.
List<dynamic> moviesJson = jsonDecode(response.body)['Search'];
// Logs the list of movies.
log(moviesJson.toString());
// Maps each JSON object to a Movie
// instance and returns the list.
return moviesJson.map((json) => Movie.fromJson(json)).toList();
}
else {
// Throws an exception if the request fails.
throw Exception('Failed to load movies');
}
}
// Fetches detailed information for a specific
// movie by its IMDb ID.
Future<MovieDetails> fetchMovieDetails(String imdbID) async {
final response = await http.get(
Uri.parse('http://www.omdbapi.com/?i=$imdbID&apikey=$apiKey'),
);
if (response.statusCode == 200) {
// Decodes the JSON response into a MovieDetails object.
return MovieDetails.fromJson(jsonDecode(response.body));
}
else {
// Throws an exception if the request fails.
throw Exception('Failed to load movie details');
}
}
}
Step 3. Database Helper
Next, we’ll create the db_helper.dart file to manage saving favorites using SQLite to our local storage.
db_helper.dart
db_helper.dart
import 'package:geeks_for_geeks/models/movie.dart';
import 'package:path/path.dart';
import 'package:sqflite/sqflite.dart';
class DBHelper {
// Singleton pattern to ensure only one
// instance of DBHelper is created.
static final DBHelper _instance = DBHelper._internal();
factory DBHelper() => _instance;
// Private constructor for singleton implementation.
DBHelper._internal();
// Holds the database instance.
Database? _database;
// Returns the database instance, initializes
// it if not already created.
Future<Database> get database async {
if (_database != null) return _database!;
_database = await _initDB();
return _database!;
}
// Initializes the database and returns
// the database object.
Future<Database> _initDB() async {
// Constructs the path to the 'movies.db' database file.
String path = join(await getDatabasesPath(), 'movies.db');
// Opens the database, creating it if it doesn't exist.
return await openDatabase(
path,
version: 1, // Database version.
onCreate: _onCreate, // Executes _onCreate if the database is new.
);
}
// Called when the database is created; creates the 'favorites' table.
Future<void> _onCreate(Database db, int version) async {
await db.execute('''
CREATE TABLE favorites (
id INTEGER PRIMARY KEY AUTOINCREMENT,
imdbID TEXT,
title TEXT,
year TEXT,
poster TEXT,
type TEXT
)
'''); // Creates the 'favorites' table with relevant columns.
}
// Inserts a movie into the 'favorites' table.
Future<void> insertFavorite(Movie movie) async {
final db = await database; // Gets the database instance.
await db.insert(
'favorites', // Target table.
movie.toMap(), // Converts the movie to a map.
conflictAlgorithm: ConflictAlgorithm.replace, // Replaces if conflict.
);
}
// Retrieves all movies from the 'favorites' table.
Future<List<Movie>> getFavorites() async {
final db = await database; // Gets the database instance.
final List<Map<String, dynamic>> maps = await db.query('favorites');
// Converts the list of maps into a list of Movie objects.
return List.generate(maps.length, (i) {
return Movie(
imdbID: maps[i]['imdbID'],
title: maps[i]['title'],
year: maps[i]['year'],
poster: maps[i]['poster'],
type: maps[i]['type'],
);
});
}
// Deletes a movie from the 'favorites' table based on its IMDb ID.
Future<bool> deleteFavorite(String imdbID) async {
// Gets the database instance.
final db = await database;
final int count = await db.delete(
'favorites',
where: 'imdbID = ?',
whereArgs: [imdbID], // Filters by the provided IMDb ID.
);
// Returns true if a row was deleted.
return count > 0;
}
Future<bool> isFavorite(String imdbID) async {
final db = await database; // Gets the database instance.
final List<Map<String, dynamic>> maps = await db.query(
'favorites',
where: 'imdbID = ?', // Filters by the provided IMDb ID.
whereArgs: [imdbID],
);
// Returns true if a movie with the given IMDb ID exists in favorites.
return maps.isNotEmpty;
}
}
Step 4. UI Components
Our Application contains three main UI Components Screens, as mentioned below:
- Home Screen
- Movie Details Screen
- Favorites Screen
Now let us Observe all them.
- Home Screen (Search Movies)
The home_screen.dart is where users can search for movies:
home_screen.dart
home_screen.dart
import 'package:flutter/material.dart';
import 'package:geeks_for_geeks/models/movie.dart';
import 'package:geeks_for_geeks/screens/favorites_screen.dart';
import 'package:geeks_for_geeks/services/movie_services.dart';
import 'movie_details_screen.dart';
class HomeScreen extends StatefulWidget {
// Constructor with optional key for widget.
const HomeScreen({super.key});
// Creates the state object.
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
// Controller for the search input.
final TextEditingController _controller = TextEditingController();
// Instance of MovieService to fetch movies.
final MovieService _movieService = MovieService();
// List to store fetched movies.
List<Movie> _movies = [];
// Fetches movies based on the search query
// and updates the UI.
void _searchMovies() async {
// Fetches movies.
final movies = await _movieService.fetchMovies(_controller.text);
setState(() {
// Updates the movie list.
_movies = movies;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('GFG Movies App'), // App bar title.
backgroundColor: Colors.green, // App bar background color.
foregroundColor: Colors.white, // App bar text color.
actions: [
// Favorite button navigates to the FavoritesScreen.
IconButton(
icon: const Icon(Icons.favorite),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => FavoritesScreen()),
);
},
),
],
),
body: Column(
children: [
// Input field for entering the search query.
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
controller:
_controller, // Binds the controller to the input field.
decoration: const InputDecoration(
labelText: 'Search for movies', // Input field hint text.
),
),
),
// Button to trigger the search function.
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green, // Button background color.
foregroundColor: Colors.white, // Button text color.
),
onPressed: _searchMovies, // Calls _searchMovies on press.
child: const Text(
"Search", // Button text.
)),
// Displays search results or a message if no movies are found.
Expanded(
child: _movies.isEmpty
? const Center(
child: Text('No movies found')) // No results message.
: ListView.builder(
itemCount: _movies.length, // Number of movies to display.
itemBuilder: (context, index) {
final movie = _movies[
index]; // Fetches the movie at the current index.
return Card(
margin: const EdgeInsets.all(8.0), // Card margin.
elevation: 5, // Card elevation effect.
child: ListTile(
leading: Image.network(
movie.poster), // Displays the movie poster.
title: Text(movie.title), // Displays the movie title.
subtitle:
Text(movie.year), // Displays the movie year.
trailing: const Icon(Icons
.arrow_forward), // Arrow icon for navigation.
onTap: () {
// Navigates to MovieDetailsScreen with the selected movie's IMDb ID.
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
MovieDetailsScreen(imdbID: movie.imdbID),
),
);
},
),
);
},
),
),
],
),
);
}
}
Screenshot of Home Page:
- Movie Details Screen
The movie_details_screen.dart is where users can see the movie details :
movie_details_screen.dart
movie_details_screen.dart
import 'package:flutter/material.dart';
import 'package:geeks_for_geeks/helpers/db_helper.dart';
import 'package:geeks_for_geeks/models/movie.dart';
import 'package:geeks_for_geeks/models/movie_details.dart';
import 'package:geeks_for_geeks/services/movie_services.dart';
class MovieDetailsScreen extends StatefulWidget {
// IMDb ID of the selected movie.
final String imdbID;
// Constructor with required IMDb ID.
const MovieDetailsScreen({super.key, required this.imdbID});
// Creates the state for this widget.
@override
_MovieDetailsScreenState createState() => _MovieDetailsScreenState();
}
class _MovieDetailsScreenState extends State<MovieDetailsScreen> {
// Service to fetch movie data from API.
final MovieService _movieService = MovieService();
// Database helper instance to manage favorites.
final DBHelper _dbHelper = DBHelper();
// Holds the detailed movie information.
MovieDetails? _movieDetails;
// Tracks whether the movie is marked as favorite.
bool isFavorite = false;
@override
void initState() {
super.initState();
// Fetch movie details when the screen initializes.
_loadMovieDetails();
// Check if the movie is already marked as favorite.
_checkFavoriteStatus();
}
// Fetches movie details from the API using the IMDb ID.
void _loadMovieDetails() async {
// API call.
final movieDetails = await _movieService.fetchMovieDetails(widget.imdbID);
setState(() {
// Updates the state with the fetched movie details.
_movieDetails = movieDetails;
});
}
// Checks if the movie is already marked as a favorite.
void _checkFavoriteStatus() async {
// Checks in the database.
final status = await _dbHelper.isFavorite(widget.imdbID);
setState(() {
// Updates the favorite status.
isFavorite = status;
});
}
// Toggles the favorite status of the movie.
void _toggleFavorite() async {
if (isFavorite) {
// Removes the movie from favorites.
await _dbHelper.deleteFavorite(widget.imdbID);
} else {
// Adds the movie to favorites.
await _dbHelper.insertFavorite(Movie(
imdbID: widget.imdbID,
title: _movieDetails!.title,
year: _movieDetails!.year,
type: 'movie', // Assuming it is a movie.
poster: _movieDetails!.poster,
));
}
// Re-checks and updates the favorite status.
_checkFavoriteStatus();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Movie Details'), // App bar title.
backgroundColor: Colors.green, // App bar background color.
foregroundColor: Colors.white, // App bar text color.
actions: [
// Favorite button to toggle the favorite status.
IconButton(
icon: Icon(isFavorite
? Icons.favorite
: Icons
.favorite_border), // Icon changes based on favorite status.
onPressed:
_toggleFavorite, // Toggles the favorite status when pressed.
),
],
),
// Displays a loading indicator if movie details are not loaded yet.
body: _movieDetails == null
? const Center(
child: CircularProgressIndicator()) // Shows a loading spinner.
: Padding(
padding:
const EdgeInsets.all(8.0), // Adds padding around the content.
child: Column(
children: [
Image.network(
_movieDetails!.poster), // Displays the movie poster.
const SizedBox(height: 10), // Adds spacing.
// Displays the movie title with bold styling.
Text(
_movieDetails!.title,
style: const TextStyle(
fontSize: 24, fontWeight: FontWeight.bold),
),
const SizedBox(height: 10), // Adds spacing.
// Displays the IMDb rating of the movie.
Text('Rating: ${_movieDetails!.imdbRating}'),
const SizedBox(height: 10), // Adds spacing.
// Displays the plot/description of the movie.
Text(_movieDetails!.plot),
],
),
),
);
}
}
Screenshot of the Movie Details Screen:
- Favorites Screen
The favorites_screen.dart displays the movies added to favorites and stored in the local database :
favorites_screen.dart
favorites_screen.dart
import 'package:flutter/material.dart';
import 'package:geeks_for_geeks/helpers/db_helper.dart';
import 'package:geeks_for_geeks/models/movie.dart';
import 'movie_details_screen.dart';
class FavoritesScreen extends StatelessWidget {
// DBHelper instance to manage favorites.
final DBHelper _dbHelper = DBHelper();
// Constructor with optional key for widget.
FavoritesScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Favorite Movies'), // App bar title.
backgroundColor: Colors.green, // App bar background color.
foregroundColor: Colors.white, // App bar text color.
),
// Builds the body of the screen using FutureBuilder
// to load favorite movies asynchronously.
body: FutureBuilder<List<Movie>>(
future: _dbHelper
.getFavorites(), // Fetches favorite movies from the database.
builder: (context, snapshot) {
// If data is not yet available, show a loading spinner.
if (!snapshot.hasData) {
return const Center(child: CircularProgressIndicator());
}
// If there are no favorite movies, display a message.
if (snapshot.data!.isEmpty) {
return const Center(child: Text('No favorite movies'));
}
// Displays the list of favorite movies.
return ListView.builder(
itemCount: snapshot.data!.length, // Number of favorite movies.
itemBuilder: (context, index) {
final movie = snapshot
.data![index]; // Fetches the movie at the current index.
// Displays each movie as a ListTile with an image, title, and year.
return ListTile(
leading:
Image.network(movie.poster), // Displays the movie poster.
title: Text(movie.title), // Displays the movie title.
subtitle: Text(movie.year), // Displays the movie release year.
// Navigates to the MovieDetailsScreen when tapped.
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MovieDetailsScreen(
imdbID: movie.imdbID), // Passes the IMDb ID.
),
);
},
);
},
);
},
),
);
}
}
Screenshot of the Favorites Screen:
Main Application File Code
After successfully creating Models, Service, and Helper files, we can finally utilize them to create a fully functional Application.
Finally, let's Call Our HomeScreen from the main.dart file.
main.dart
main.dart
import 'package:flutter/material.dart';
import 'package:movies/screens/home_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
useMaterial3: true,
),
home: const HomeScreen());
}
}
Complete code for the Application Here : Movie_Database_Application
Output :
Similar Reads
Basics
Flutter TutorialThis Flutter Tutorial is specifically designed for beginners and experienced professionals. It covers both the basics and advanced concepts of the Flutter framework.Flutter is Googleâs mobile SDK that builds native Android and iOS apps from a single codebase. It was developed in December 2017. When
7 min read
Flutter | An introduction to the open source SDK by GoogleFlutter is Googleâs Mobile SDK to build native iOS and Android, Desktop (Windows, Linux, macOS), and Web apps from a single codebase. When building applications with Flutter, everything is Widgets â the blocks with which the flutter apps are built. They are structural elements that ship with a bunch
5 min read
Flutter - Architecture ApplicationFlutter architecture application mainly consists of: WidgetsGesturesConcept of StateLayersWidgetsWidgets are the primary component of any flutter application. It acts as a UI for the user to interact with the application. Any flutter application is itself a widget that is made up of a combination of
3 min read
Android Studio Setup for Flutter DevelopmentThis article will show how to set up Android Studio to run Flutter Applications. Android Studio is one of the popular IDE( integrated development environment  ) developed by Google itself to create cross-platform Android applications. First, you have to install Android Studio version 3.0 or later, a
3 min read
Getting Started with Cross-Platform Mobile Application using FlutterFlutter is an open-source mobile application development SDK created by Google to develop cross-platform mobile applications. Flutter makes it extremely easy and fast for even novice programmers (computer programmers who are not experienced in any programming languages) to build high-quality and res
7 min read
Flutter Development in Ubuntu 20.04In this article, let's look at how you can set up a development environment for Flutter if you're using Ubuntu 20.04. It was difficult earlier and was kind of a nightmare to get it done. But now, it has changed, and anyone can easily set up a flutter development environment on their Ubuntu system in
5 min read
Key Widgets
UI Components
Flutter - TabsTabs are the part of the UI that navigates the user through different routes(ie, pages) when clicked upon. The use of tabs in applications is standard practice. Flutter provides a simple way to create tab layouts using the material library. In this article, we will be exploring the same in detail.To
2 min read
Flutter - Horizontal ListIn Flutter there can be Two types of lists, namely, horizontal list and vertical list. Both these lists are created using the ListView constructor and assigning the scrollDirection parameter. By default, the scroll direction parameter is vertical for a vertical list but it can be overridden by passi
3 min read
Flutter - Expansion Tile CardThe Expansion Tile Card works similarly to that of the Flutter SDK's standard expansion tile. But it uses the style used by Google itself in its products to raise a tile. It can be called a better version of the Flutter's ExpansionTileCard. In this article, we will look into the process of implement
3 min read
Icon Class in FlutterIcon class in Flutter is used to show specific icons in our app. Instead of creating an image for our icon, we can simply use the Icon class for inserting an icon in our app. For using this class you must ensure that you have set uses-material-design: true in the pubsec.yaml file of your object.Synt
2 min read
Expanded Class in FlutterWhen we create any child of a row or column we provide the size of the widget according to the screen size but sometimes when we provide more size of child as compared to screen size we get a warning and our widget goes out of the screen for resolving this we put a child of a row or column in an exp
3 min read
Flutter - DialogsThe dialog is a type of widget which comes on the window or the screen which contains any critical information or can ask for any decision. When a dialog box is popped up all the other functions get disabled until you close the dialog box or provide an answer. We use a dialog box for a different typ
5 min read
Flutter - Circular & Linear Progress IndicatorsProgress Indicator in any application displays the time which is needed for some tasks to complete such as downloading, installation, uploading, file transfer, etc. This shows the progress of a task or the time to display the length of the processes.In Flutter, progress can be displayed in two ways:
4 min read
Flutter - Staggered Grid ViewStaggered Grid View is a type of layout that is used to display images and posts. As you see in various social platforms such as Pinterest, Instagram and many more. The main feature of Staggered Grid View is that it makes the layout beautiful and develop a great User Experience. Staggered Grid View
4 min read
Design & Animations
Customizing Fonts in FlutterCustomization is everywhere, from documents to apps, we can customize everything as we want to. The power of customization is humongous, and it has revolutionized the way we look at technology in this world. Just like how printing "Hello World", is the basic step towards learning a new programming l
4 min read
Flutter - Skeleton TextIn Flutter, the skeleton_text library is used to easily implement skeleton text loading animation. Its main application in a flutter app is to assure its users that the servers are working but running slow, but the content will eventually load. It also enhances the User Interface if the user connect
3 min read
Flutter - ThemesThemes are an integral part of UI for any application. Themes are used to design the fonts and colors of an application to make it more presentable. In Flutter, the Theme widget is used to add themes to an application. One can use it either for a particular part of the application like buttons and n
3 min read
Flutter - Lazy LoaderThe Lazy loader is a wrapper to the ScrollView that enables lazy loading. It is very useful in situations where the application's intent is to show endless content in a ListView. For instance, Instagram, Facebook, Youtube and most social networking platforms use them to deliver an endless stream of
5 min read
Flutter - UI OrientationAll applications should be able to adjust their User Interface (UI) based on the orientation of the phone. By orientation, we implicate the portrait and landscape mode in smartphones rather the physical orientation. In, Flutter it is done so by using the OrientationBuilder, which determines the app'
2 min read
Flutter - Animation in Route TransitionRoutes are simply Pages in Flutter applications. An application often needs to move from one page to another. However, animations can be used to make these transitions smoother. These animations can be used to curve or tween the Animation object of the PageRouteBuilder class to alter the transition
3 min read
Flutter - Physics Simulation in AnimationPhysics simulation in Flutter is a beautiful way to Animate components of the flutter app to make it look more realistic and interactive. These can be used to create a range of animations like falling objects due to gravity to making a container seem attached to a spring. In this article, we will ex
4 min read
Flutter - Radial Hero AnimationA Radial transformation means turning a circular shape into a square shape. In Radial Hero animation the same is done with a Hero. In Flutter, a Hero Widget is used to create a hero animation. A hero in this context refers to a widget that moves in between screens. This is one of the most fundamenta
3 min read
Flutter - Hinge AnimationAnimations are a big part of the Flutter application. It makes an app sweet to the eyes and equally user-friendly. In this article, we will discuss in detail the Hinge animations. In Flutter there are two ways to work with animations namely:A pub packageAnimated Builder WidgetIn this article, we wil
4 min read
Flutter - Lottie AnimationVisualization is an integral part of any application. Animations can highly glorify the UI of an app, but animations can be hectic to implement for an application. This is where the Lottie animation comes in. Lottie is a JSON-based animation file. It can be used both as a network asset and a static
3 min read
Forms & Gestures
Navigation & Routing
URLs in FlutterWhile surfing the net, every user will come across many buttons, text, etc., that would redirect the user to a different webpage in the same tab or in a different tab when clicked. In the same way, when a developer links a URL to a button or text in an app, the app will open the website when clicked
5 min read
Routes and Navigator in FlutterRoute: Apps are the new trend. The number of apps available in the Play Store and App Store nowadays is quite a lot. The apps display their content in a full-screen container called pages or screens. In flutter, the pages or screens are called Routes. In android, these pages/screens are referred to
4 min read
Flutter - WebSocketsWebSockets are used to connect with the server just like the http package. It supports two-way communication with a server without polling.In this article, we will explore the below-listed topics related to WebSockets in Flutter:Connecting to a WebSocket serverListen to messages from the server.Send
3 min read
Flutter - Named RoutesAn app has to display multiple screens depending upon the user's needs. A user needs to back and forth from the multiple screens to the home screen. In, Flutter this is done with the help of Navigator.Note: In Flutter, screens and pages are called routes. Steps to Implement Named Routes in FlutterSt
3 min read
Flutter - Arguments in Named RoutesNavigating between the various routes (i.e, pages) of an application in Flutter is done with the use of Navigator. The Navigator uses a common identifier to transition between routes. One can pass arguments to these routes using the arguments parameter of Navigator.pushNamed() method. Arguments can
4 min read
Multi Page Applications in FlutterApps are widely used by humans in this techie world. The number of apps in the app store is increasing day by day. Due to this competition, app developers have started to add a number of features to their apps. To reduce this complexity, the content of the app is mostly divided into various pages so
5 min read
Flutter - Updating Data on the InternetIn today's world, most applications heavily rely on fetching and updating information from the servers through the internet. In Flutter, such services are provided by the http package. In this article, we will explore the same. Let's see a sample video of what we are going to develop.Sample Video:St
5 min read
Flutter - Fetching Data From the InternetIn today's world, most applications heavily rely on fetching information from the servers through the internet. In Flutter, such services are provided by the http package. In this article, we will explore this concept.Steps to Implement Data Fetching from the InternetStep 1 : Create a new flutter ap
4 min read
Flutter - Deleting Data On The InternetIn this article, we will explore the process of deleting data on the internet. Before deleting data on the internet, we will fetch the data first and then will delete the data.Steps to implement Deleting Data on the InternetStep 1 : Create a new flutter applicationCreate a new Flutter application us
4 min read
Flutter - Sending Data To The InternetInteracting with the Internet is crucial for most apps to function. In Flutter, sending data to the internet is one of them, and the http package is used to send the data to the internet. In this article, we will explore the same topic in detail. Steps to Implement Sending Data to the InternetStep 1
5 min read
Flutter - Send Data to ScreenInteraction with the UI is an integral part of any application. But more often than not, the information needs to be sent from one screen to another. For instance, say you need to pass data regarding a selected or tapped component of the UI to another route(i.e., page). In this article, we will expl
4 min read
Hardware Interaction
Gallery Access and Camera in FlutterWe can add images from the gallery using the image_picker package in Flutter. For this, you'll need to use your real device.Steps to Implement Gallery and Camera AccessStep 1: Create a new flutter applicationCreate a new Flutter application using the command Prompt. To create a new app, write the be
3 min read
Camera Access in FlutterTo add images from the camera in Flutter, we'll use the image_picker package. For this, you'll need to use your real device.Follow the below steps to display the images from the cameraStep 1: Create a new Flutter ApplicationCreate a new Flutter application using the command Prompt. To create a new a
3 min read
Background local notifications in FlutterSometimes user wants some essential features like the latest news updates, latest articles updates, weather condition alert, complete his/her profile update, future events update and much more in his/ her Android or iOS device without opening App and if you would like to develop this kind of Android
6 min read
Restrict Landscape mode in FlutterIn this article, we'll learn how to restrict landscape mode in the flutter app. A production-ready app should be free from all sorts of bugs and errors. Mostly, we design our app for portrait orientation if we flip to landscape orientation, the UI might not be adjusted for that. So, there are two ca
2 min read
Sample Flutter Apps
Basic Quiz App In FlutterFlutter SDK is an open-source software development kit for building beautiful UI that is natively compiled. Currently, it is available as a stable version for iOS and Android OS. In this app, we are going to have the features or modules mentioned below:Five multiple-choice questions ( more questions
8 min read
A Hello World App using FlutterIn Flutter, everything is a Widget, and by using predefined widgets, one can create user-defined widgets just like using int, float, and double can create user-defined data types. In Flutter there are three types of widgetsStateless WidgetStateful WidgetInherited WidgetIn this article, we will use S
3 min read
Flutter - Simple PDF Generating AppFlutter Community has created several packages to work with PDFs in our apps. In this article, we will be creating a simple PDF-generating app. This application will convert plain text to PDF. The packages that we are going to need are listed below with their uses:pdf: It is a PDF creation library f
9 min read
Flutter - Magic 8 Ball AppWe will be building a Magic 8-Ball app that will give you the answers to all fun, tricky questions (basically, it is a fun game app that will change its state of image using Textbutton in Stateful widgets). For this, we will use Stateless and Stateful Flutter widgets and a Textbutton. Steps to build
3 min read
Advance Concepts