Code With Bisky

Flutter Project Setup: Step-by-Step Guide with Dependencies for Beginners.

Welcome to this Flutter tutorial on setting up a new Flutter project! In this video, we'll walk you through the step-by-step process of creating a Flutter project from scratch, along with installing the necessary dependencies. Whether you're a beginner or an experienced developer, this tutorial will guide you through the initial setup to get your Flutter environment up and running smoothly.

Key Topics covered:

  • Installing Flutter SDK and configuring Flutter on your system
  • Setting up Android Studio or Visual Studio Code as your preferred IDE
  • Creating a new Flutter project using the Flutter CLI or IDE interface
  • Understanding the project structure and important files
  • Adding essential dependencies for common functionalities in Flutter
  • Exploring popular Flutter packages and libraries for specific use cases
  • By the end of this tutorial, you'll have a solid foundation for starting your Flutter project and a clear understanding of the necessary dependencies to enhance your app's functionality and UI.

Description:

The tutorial will walk you through the process of creating a Flutter Project using Intelij IDE. We shall add essential dependencies for common functionalities in Flutter Chat Application

Code Snippet(Pubspec.yml):


name: chat_with_bisky
description: A new Flutter project.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1
environment:
  sdk: '>=3.0.2 <4.0.0'
dependencies:
  flutter:
    sdk: flutter
#  Default icons asset for Cupertino widgets based on Apple styled icons
  cupertino_icons: ^1.0.2
  flutter_bloc: ^8.1.3
#    set of utility libraries for Dart that makes using many Dart libraries easier and more convenient, or adds additional functionality.
  quiver: ^3.2.1
#  A simple yet efficient dependency injection container for Dart and Flutter
  kiwi: ^4.1.0
#  Automatically generate code for converting to and from JSON by annotating Dart classes
  json_serializable: ^6.7.0
#  Classes and helper functions that support JSON code generation via the `json_serializable` package
  json_annotation: ^4.8.1
#  A predictable state management library that helps implement the BLoC (Business Logic Component) design pattern.
  bloc: ^8.1.2
#  Flutter plugin for reading and writing simple key-value pairs. Wraps NSUserDefaults on iOS and SharedPreferences on Android.
  shared_preferences: ^2.1.1
#  AutoRoute is a declarative routing solution, where everything needed for navigation is automatically generated for you
  auto_route: ^7.2.0
#  A simple and customizable flutter package for inputting phone number in intl / international format uses Google's libphonenumber
  intl_phone_number_input: ^0.7.3+1
#  Introduction/Onboarding package for flutter app with some customizations possibilities
  introduction_screen: ^3.1.8
  flutter_secure_storage: ^8.0.0
#  RFlutter Alert is super customizable and easy-to-use alert / popup dialogs for Flutter. You may create reusable alert styles or add buttons as much as you want with ease.
  rflutter_alert: ^2.0.7
#  Appwrite is an open-source self-hosted backend server that abstract and simplify complex and repetitive development tasks behind a very simple REST API
  appwrite: ^9.0.0
#  A flutter package to create a OTP Text Field widget in your application.
  otp_text_field: ^1.1.3
#  An SVG rendering and widget library for Flutter, which allows painting and displaying Scalable Vector Graphics 1.1 files.
  flutter_svg: ^2.0.6
#  A Flutter plugin to retrieve and manage contacts on Android and iOS devices
  contacts_service: ^0.6.3
#  Permission plugin for Flutter. This plugin provides a cross-platform (iOS, Android) API to request and check permissions.
  permission_handler: ^10.2.0
#  Generating unique ids
  uuid: ^3.0.7
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0
  auto_route_generator: ^7.1.1
  build_runner:
flutter:
  uses-material-design: true

Your pubspec must have the above dependencies

Configure Routing

We are using routing dependency called auto_route . The dependency is easy to use and to configure.

  • Create a folder app_route >> lib/app_route
  • Create a file AppRouter.dart
  • Create a class AppRouter that extends _$AppRouter

Code Snippet (app_route.dart):


import 'package:auto_route/auto_route.dart';
import 'AppRouter.gr.dart';

@AutoRouterConfig(replaceInRouteName: 'Screen,Route')
class AppRouter extends $AppRouter{
  @override
  List<AutoRoute>  get routes=>[
    AutoRoute(page: MyHomePage.page,initial: true),
  ];
}
  • Add @RoutePage() to the MyHomePage class in main.dart. It is going to be our initial page
  • Import the below dependencies
  • import 'package:auto_route/annotations.dart';
  • import 'package:auto_route/auto_route.dart';
  • Run the following command in your terminal flutter packages pub run build_runner build

Configure Routing:

  • return MaterialApp() should be return MaterialApp.router()
  • Add routerConfig: appRouter.config(),

        class MyApp extends StatelessWidget {
          final appRouter = AppRouter();

          MyApp({super.key});
            @override
          Widget build(BuildContext context) {
            return MaterialApp.router(
              routerConfig: appRouter.config(),
              title: 'Flutter Demo',
              theme: ThemeData(
                colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
                useMaterial3: true,
              ),
            );
          }
        }

Custom Widgets

I added some custom widgets and values

  • lib/widgets
  • lib/constant
  • lib/values
  • You can clone the project and copy the folders. The gitlab link is below.

Conclusion:

We managed to add dependencies and to configure our routing. In the next video, we shall implement Splash Screens of our Chat Application.

Subscribe to our Channel Discord Gitlab Repository