Add content to flutter roadmap (#3389)
* Adding content to 100-dart-basics * Adding content to 102-setup-development-environment * Adding content to 102-styled-widgets * Adding content to 102-widgets * Adding content to 103-working-with-assets * Adding content to 105-repo-hosting-services * Adding content to 106-design-principles * Adding content to 107-package-manager * Adding content to 108-working-with-apis * Adding content to 102-firebase * Adding content to 109-storage * Adding content to 114-reactive programming * Adding content to 115-dev-tools * Adding content to 116-flutter-internals * Adding content to 117-ci-cd * Adding content to 118-analytics * Adding content to 119-deployment * Adding content to 110-advanced-dart * Adding content to 111-state-management * Adding content to 112-animations * Adding content to 113-testing * Adding content to 102-flutter-bloc, 101-flutter-outline * Update src/roadmaps/flutter/content/100-dart-basics/104-operators.md * Update src/roadmaps/flutter/content/101-setup-development-environment/101-ides/index.md --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>pull/3398/head
syedmouaazfarrukh
2 years ago
committed by
GitHub
parent
ea02c8835a
commit
6a5df98f4f
96 changed files with 992 additions and 100 deletions
@ -1,7 +1,8 @@ |
||||
# Dart pad |
||||
# DartPad |
||||
|
||||
DartPad is an open source tool that lets you play with the Dart language in any modern browser. |
||||
DartPad is an online tool that allows developers to write and run Dart code snippets. It can also be used to run Flutter code, making it a convenient way to try out Flutter apps and widgets without having to set up a full development environment. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [DartPad](https://dart.dev/tools/dartpad) |
||||
- [DartPad in Tutorials](https://dart.dev/resources/dartpad-best-practices) |
||||
@ -1,5 +1,13 @@ |
||||
# Variables |
||||
|
||||
In Flutter, variables are used to store values. There are two types of variables in Flutter: |
||||
|
||||
- local variables: These are declared within a function and are only accessible within that function |
||||
- Instance variables: They are declared within a class and are accessible throughout the entire class. |
||||
|
||||
Variables in Flutter can store values of different data types, such as numbers, strings, booleans, and more. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Variables](https://dart.dev/guides/language/language-tour#variables) |
||||
- [Dart - Variables](https://howtoflutter.dev/dart/variables/) |
||||
@ -1,5 +1,17 @@ |
||||
# Built in types |
||||
# Built-in Types |
||||
|
||||
There are several built-in data types, including: |
||||
|
||||
- int: used to store integers |
||||
- double: used to store floating-point numbers |
||||
- String: used to store text |
||||
- bool: used to store true or false values |
||||
- List: used to store ordered collections of objects |
||||
- Map: used to store unordered collections of key-value pairs |
||||
|
||||
Additionally, there are other complex data types like dynamic, var, and Object in Dart programming language which is used in Flutter. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Built-in types](https://dart.dev/guides/language/language-tour#built-in-types) |
||||
- [Overview of Built-in Types](https://dart.dev/guides/language/coming-from/js-to-dart#built-in-types) |
||||
@ -1,5 +1,15 @@ |
||||
# Operators |
||||
|
||||
Operators are symbols or keywords used to perform operations on values. There are several types of operators available in Flutter: |
||||
|
||||
- Arithmetic operators: used to perform mathematical operations like addition (+), subtraction (-), multiplication (*), division (/), and more. |
||||
- Relational operators: used to compare values and return a boolean result (==, !=, >, <, >=, <=). |
||||
- Logical operators: used to perform logical operations like AND (&&), OR (||), and NOT (!). |
||||
- Assignment operators: used to assign values to variables (=, +=, -=, *=, /=, %=). |
||||
- Ternary operator: a shorthand way of writing simple if-else statements (condition ? if_true : if_false). |
||||
|
||||
These operators can be used to perform operations on values, variables, and expressions in Flutter. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Operators](https://dart.dev/guides/language/language-tour#operators) |
||||
@ -1,5 +1,18 @@ |
||||
# Control flow statements |
||||
# Control Flow Statements |
||||
|
||||
In Dart, control flow statements are used to control the flow of execution of a program. The following are the main types of control flow statements in Dart: |
||||
|
||||
- if-else: used to conditionally execute code based on a boolean expression. |
||||
- for loop: used to repeat a block of code a specific number of times. |
||||
- while loop: used to repeat a block of code as long as a given condition is true. |
||||
- do-while loop: similar to the while loop, but the block of code is executed at least once before the condition is evaluated. |
||||
- switch-case: used to select one of several code blocks to execute based on a value. |
||||
- break: used to exit a loop early. |
||||
- continue: used to skip the current iteration of a loop and continue with the next one. |
||||
|
||||
These control flow statements can be used to create complex logic and control the flow of execution in Dart programs. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Control flow statements](https://dart.dev/guides/language/language-tour#control-flow-statements) |
||||
- [Dart Control Flow Statements](https://www.w3adda.com/dart-tutorial/dart-control-flow-statements) |
||||
@ -1,7 +1,16 @@ |
||||
# Flutter cli |
||||
# Flutter CLI |
||||
|
||||
The flutter command-line tool is how developers (or IDEs on behalf of developers) interact with Flutter. |
||||
Flutter CLI (Command Line Interface) is a command-line tool that is used to develop, build, and run Flutter applications. It provides a set of commands and tools that developers can use to create, test, and deploy Flutter apps from the terminal. Some of the common tasks that can be performed using the Flutter CLI include: |
||||
|
||||
- Creating a new Flutter project |
||||
- Running Flutter app on a connected device or emulator |
||||
- Building and deploying Flutter app to app stores |
||||
- Updating the Flutter framework and packages |
||||
- Analyzing the performance of Flutter apps |
||||
|
||||
By using the Flutter CLI, developers can streamline the development process and automate repetitive tasks. The Flutter CLI is included in the Flutter SDK and is available for Windows, macOS, and Linux. |
||||
Visit the following resources to learn more: |
||||
|
||||
- [The Flutter command-line tool](https://docs.flutter.dev/reference/flutter-cli) |
||||
- [CLI Packages in Flutter](https://dart.dev/server/libraries#command-line-packages) |
||||
- [Get started with Flutter CLI](https://dart.dev/tutorials/server/get-started) |
||||
@ -1 +1,17 @@ |
||||
# Android studio |
||||
# Android Studio |
||||
|
||||
Android Studio is an IDE that can be used for developing Flutter applications as well as Android apps. Flutter is a UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. In Android Studio, developers can use the Flutter plugin to access a suite of tools specifically designed for Flutter development, including: |
||||
|
||||
- Flutter widget inspector |
||||
- Flutter outline |
||||
- Flutter rendering tree |
||||
- Flutter performance tool |
||||
- Flutter layout explorer |
||||
|
||||
By providing a rich set of tools and features for Flutter development, Android Studio makes it easy for developers to build, test, and debug Flutter apps. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Android Studio Setup for Flutter Development](https://www.geeksforgeeks.org/android-studio-setup-for-flutter-development/) |
||||
- [Android Studio for Flutter](https://docs.flutter.dev/development/tools/android-studio) |
||||
- [Get started with Android Studio](https://dart.dev/tools/jetbrains-plugin) |
||||
@ -1 +1,9 @@ |
||||
# Intellij idea |
||||
# IntelliJ IDEA |
||||
|
||||
|
||||
|
||||
Learn more from the following: |
||||
|
||||
- [IntelliJ IDEA for Flutter](https://docs.flutter.dev/development/tools/android-studio) |
||||
- [Get started with IntelliJ](https://dart.dev/tools/jetbrains-plugin) |
||||
- [IntelliJ IDEA](https://www.jetbrains.com/idea/) |
||||
@ -1 +1,16 @@ |
||||
# Ides |
||||
# IDEs |
||||
|
||||
An IDE (Integrated Development Environment) is a software application that provides a comprehensive environment for coding, debugging, testing, and deploying software. There are several IDEs that support Flutter development, including: |
||||
|
||||
- Android Studio: Google's official IDE for Android development, which also supports Flutter development. |
||||
- Visual Studio Code: a popular, free, and open-source code editor that can be extended with plugins, including the Flutter extension. |
||||
- IntelliJ IDEA: a commercial Java IDE that also supports Flutter development. |
||||
- Xcode: Apple's official IDE for iOS development, which also supports Flutter development for macOS and iOS. |
||||
|
||||
These IDEs provide a variety of features and tools to assist in the development of Flutter apps, including code completion, debugging, testing, and more. Developers can choose the IDE that works best for their needs and preferences. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Setting up and Editor](https://docs.flutter.dev/get-started/editor) |
||||
- [Android Studio and IntelliJ](https://docs.flutter.dev/development/tools/android-studio) |
||||
- [IDEs and editors for Flutter](https://dart.dev/tools#ides-and-editors) |
||||
@ -1 +1,16 @@ |
||||
# Setup development environment |
||||
# Setup Development Environment |
||||
|
||||
To set up a development environment for Flutter, you need to install the following software: |
||||
|
||||
- Flutter SDK: Download and install the latest version of the Flutter SDK from the official website (https://flutter.dev/docs/get-started/install). |
||||
- Integrated Development Environment (IDE): You can use Android Studio, Visual Studio Code, IntelliJ IDEA or any other IDE of your choice. |
||||
- Emulator or a physical device: You can use an emulator or a physical device to run and test your Flutter apps. You can use the Android emulator provided by Android Studio or use a physical Android or iOS device. |
||||
- Git: Git is used for version control and is recommended for Flutter development. You can download and install Git from https://git-scm.com/. |
||||
- Dart SDK: Dart is the programming language used by Flutter, and the Dart SDK is required to develop Flutter apps. The Dart SDK is included in the Flutter SDK. |
||||
|
||||
Once you have installed all the required software, you can create a new Flutter project using the Flutter CLI or your IDE, and start building your app. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Get started with Flutter](https://docs.flutter.dev/get-started/install) |
||||
- [Installing Dart SDK](https://dart.dev/get-dart) |
||||
@ -1,7 +1,9 @@ |
||||
# Stateless widgets |
||||
# Stateless Widgets |
||||
|
||||
A stateless widget never changes. Icon, IconButton, and Text are examples of stateless widgets. |
||||
Stateless widgets in Flutter are widgets that don't maintain any mutable state. They are designed to be immutable and rebuild each time the framework needs to update the UI. They are suitable for static, unchanging views or simple animations. They can be created using the `StatelessWidget` class and have a single build method that returns a widget tree. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [StatelessWidget class](https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html) |
||||
- [Flutter – Stateful vs Stateless Widgets](https://www.geeksforgeeks.org/flutter-stateful-vs-stateless-widgets/) |
||||
- [How to Create Stateless Widgets](https://medium.com/flutter/how-to-create-stateless-widgets-6f33931d859) |
||||
@ -1,7 +1,21 @@ |
||||
# Material widgets |
||||
# Material Widgets |
||||
|
||||
Visual, behavioral, and motion-rich widgets implementing the Material Design guidelines. |
||||
Material Widgets are a set of Flutter widgets that implement Material Design, Google's visual language for design. They are designed to provide a consistent look and feel on both Android and iOS devices. Some common Material Widgets include: |
||||
|
||||
- RaisedButton |
||||
- Scaffold |
||||
- AppBar |
||||
- TextField |
||||
- Drawer |
||||
- SnackBar |
||||
- BottomNavigationBar |
||||
- IconButton |
||||
|
||||
These widgets are commonly used in Flutter apps to provide a familiar look and feel that follows Material Design guidelines. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Material Components widgets](https://docs.flutter.dev/development/ui/widgets/material) |
||||
- [Flutter – Material Design](https://www.geeksforgeeks.org/flutter-material-design/) |
||||
- [Widget catalog in Flutter](https://docs.flutter.dev/development/ui/widgets) |
||||
- [Material Designs Guidlines](https://m2.material.io/design/guidelines-overview) |
||||
@ -1,7 +1,9 @@ |
||||
# Cupertino widgets |
||||
|
||||
Beautiful and high-fidelity widgets for current iOS design language. |
||||
Cupertino widgets are a set of Flutter widgets that mimic the look and feel of Apple's iOS user interface. They are designed to provide a consistent look and feel on both iOS and Android devices, and include widgets such as CupertinoButton, CupertinoAlertDialog, and CupertinoSlider. These widgets are useful for building cross-platform apps that need to conform to the iOS design aesthetic.s |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Cupertino (iOS-style) widgets](https://docs.flutter.dev/development/ui/widgets/cupertino) |
||||
- [Flutter Cupertino Tutorial](https://blog.logrocket.com/flutter-cupertino-tutorial-build-ios-apps-native/) |
||||
- [Flutter Cupertino Widgets](https://www.youtube.com/watch?v=L-TY_5NZ7z4) |
||||
@ -1 +1,13 @@ |
||||
# Styled widgets |
||||
# Styled Widgets |
||||
|
||||
Styled Widgets are Flutter widgets that are decorated with custom styles, such as colors, fonts, and shapes. They can be created by wrapping existing widgets with other widgets, such as Container, Theme, or BoxDecoration. For example: |
||||
|
||||
- Container widget can be used to set a fixed width, height, padding, and margin. |
||||
- Theme widget can be used to specify a color scheme and typography for an entire app or a section of it. |
||||
- BoxDecoration can be used to add a border, background color, and a border radius to a widget. |
||||
- Styled Widgets allow developers to easily customize the look and feel of their Flutter app and create a consistent visual style. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Styling widgets in Flutter](https://docs.flutter.dev/development/ui/widgets/styling) |
||||
- [Style Your Flutter Widgets](https://www.youtube.com/watch?v=kcq8AbVyMbk) |
||||
@ -1,7 +1,21 @@ |
||||
# Widgets |
||||
|
||||
In Flutter, a widget is a piece of reusable user interface (UI) code that can be used to build complex and dynamic user interface designs. |
||||
Widgets in Flutter are the basic building blocks of the user interface. They define how the UI looks and behaves. Widgets can be combined to create complex user interfaces and can be easily customized. Some common types of widgets include: |
||||
|
||||
- Text |
||||
- Image |
||||
- Button |
||||
- Container |
||||
- Card |
||||
- Column & Row |
||||
- ListView |
||||
- AppBar |
||||
- Scaffold |
||||
|
||||
Widgets in Flutter are also designed to be highly reusable, allowing developers to build complex UIs quickly and efficiently. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Introduction to widgets](https://docs.flutter.dev/development/ui/widgets-intro) |
||||
- [Widget catalog](https://docs.flutter.dev/development/ui/widgets) |
||||
- [Flutter Widgets Explained](https://www.youtube.com/watch?v=FU2Eeizo95o) |
||||
@ -1,7 +1,13 @@ |
||||
# Fonts |
||||
|
||||
Flutter works with custom fonts and you can apply a custom font across an entire app or to individual widgets. |
||||
You can use custom fonts in your app by including the font file in your app's assets and specifying the font in your app's styles. To use a custom font: |
||||
|
||||
- Add the font files to your app's assets folder. |
||||
- In your pubspec.yaml file, specify the fonts under the flutter section |
||||
- In your app's styles, specify the font family |
||||
- Use the font in a Text widget |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Use a custom font](https://docs.flutter.dev/cookbook/design/fonts) |
||||
- [Font - Flutter](https://docs.flutter.dev/cookbook/design/fonts) |
||||
- [How to use custom fonts in Flutter](https://blog.logrocket.com/use-custom-fonts-flutter/) |
||||
@ -1,7 +1,14 @@ |
||||
# Images |
||||
|
||||
Apps can include both code and assets. Flutter uses the pubspec.yaml file, located at the root of your project, to identify assets required by an app. |
||||
In Flutter, you can display images using the `Image` widget. There are several ways to add an image to your app: |
||||
|
||||
- Asset: Add the image to your app's assets and specify the asset path in the `Image` widget. |
||||
- Network: Display an image from a URL by specifying the URL in the `Image` widget. |
||||
- File: Display an image from a file by specifying the file path in the `Image` widget. |
||||
|
||||
The `Image` widget also accepts additional parameters such as `fit`, `width`, and `height` to control the size and scaling of the image. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Adding assets and images](https://docs.flutter.dev/development/ui/assets-and-images) |
||||
- [Images in Flutter](https://docs.flutter.dev/cookbook/images) |
||||
@ -1 +1,13 @@ |
||||
# Other file types |
||||
# Other File Types |
||||
|
||||
In Flutter, you can work with different file types besides images. Some common file types that you can use in Flutter include: |
||||
|
||||
1. Text files: You can read or write text files using the dart:io library. |
||||
2. JSON files: You can parse JSON data using the dart:convert library. |
||||
javascript |
||||
3. Audio and Video files: You can play audio and video files using the video_player and audioplayers packages. |
||||
4. PDF files: You can display PDF files using the pdf package. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [File class](https://docs.flutter.dev/cookbook/lists/mixed-list) |
||||
@ -1 +1,15 @@ |
||||
# Working with assets |
||||
# Working with Assets |
||||
|
||||
Assets are resources such as images, fonts, and other files that are included in your app. To use assets in Flutter, you need to specify them in your app's `pubspec.yaml` file and then access them in your code. |
||||
|
||||
Here's how to work with assets in Flutter: |
||||
|
||||
1. Add assets to your app's `pubspec.yaml` file: |
||||
2. Access assets in your code |
||||
|
||||
The `pubspec.yaml` file is used to manage dependencies, assets, and other settings in your Flutter app. The `flutter` section is used to specify assets that should be included with the app. The path specified in the `assets` section should be relative to the `pubspec.yaml` file. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Flutter Tutorial - Assets](https://www.youtube.com/watch?v=Hxh6nNHSUjo) |
||||
- [Adding Assets in Flutter](https://docs.flutter.dev/development/ui/assets-and-images) |
||||
@ -1 +1,19 @@ |
||||
# Github |
||||
|
||||
GitHub is a web-based platform that provides hosting for software development and version control using Git. It is widely used by developers and organizations around the world to manage and collaborate on software projects. |
||||
|
||||
With GitHub, you can: |
||||
|
||||
- Store your code in a repository (repo) and version it using Git. |
||||
- Collaborate with other people on a project by sharing your repo and working together on code changes. |
||||
- Share your projects with the world by making your repos public. |
||||
- Use GitHub to discover new projects and contribute to existing ones by forking a repo, making changes, and submitting a pull request. |
||||
- Track issues and bugs, and manage projects with features like project boards, milestones, and wikis. |
||||
|
||||
GitHub also provides a wide range of tools and services for developers, including GitHub Pages for hosting websites, GitHub Actions for automating workflows, and GitHub Marketplace for finding and integrating with third-party tools. |
||||
|
||||
Learn more from the following resources: |
||||
|
||||
- [Git and GitHub for Beginners - Crash Course](https://www.youtube.com/watch?v=RGOj5yH7evk) |
||||
- [Get Started with Github](https://docs.github.com/en) |
||||
- [GitHub Tutorial – for Beginners](https://www.freecodecamp.org/news/git-and-github-for-beginners/) |
||||
@ -1 +1,17 @@ |
||||
# Repo hosting services |
||||
# Repo Hosting Services |
||||
|
||||
There are several repository hosting services that support Flutter development. Here are some popular options: |
||||
|
||||
- GitHub: One of the most widely used repository hosting services for Flutter projects. It provides hosting for Git repositories, issue tracking, collaboration, and many other features. |
||||
- GitLab: A web-based Git repository manager that provides a wide range of features, including version control, issue tracking, continuous integration, and more. |
||||
- Bitbucket: A Git and Mercurial repository hosting service that provides features such as pull requests, code reviews, and team management. |
||||
- AWS CodeCommit: A fully managed Git repository service provided by Amazon Web Services. It integrates with other AWS services and provides features such as branch protection, code reviews, and continuous integration. |
||||
- Azure DevOps: A set of development tools, services, and features provided by Microsoft, including version control (Git), continuous integration, and project management. |
||||
|
||||
When choosing a repository hosting service for your Flutter project, consider your specific needs and requirements, such as collaboration, scalability, and cost. You may also want to consider factors such as ease of use, integrations, and support for third-party tools. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Host Flutter Website On GitHub Pages](https://www.youtube.com/watch?v=z-yOqoQ2q6s) |
||||
- [How to Deploy a Flutter Web App?](https://medium.com/solute-labs/flutter-for-web-how-to-deploy-a-flutter-web-app-c7d9db7ced2e) |
||||
- [Deploying - Flutter](https://docs.flutter.dev/deployment/web#deploying-to-the-web) |
||||
@ -1 +1,16 @@ |
||||
# Dependency injection |
||||
# Dependency Injection |
||||
|
||||
Dependency Injection is a design pattern that allows objects to receive their dependencies from external sources instead of creating them internally. In Flutter, this can be useful for managing complex state, reducing coupling between components, and making testing easier. |
||||
|
||||
Here's how to use dependency injection in Flutter: |
||||
|
||||
- Create a dependency |
||||
- Create a provider |
||||
- Use the provider in your widget tree |
||||
- Access the dependency in a widget |
||||
|
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Dependency Injection In Flutter](https://medium.com/flutter-community/dependency-injection-in-flutter-f19fb66a0740) |
||||
- [Flutter Dependency Injection For Beginners](https://www.youtube.com/watch?v=vBT-FhgMaWM) |
||||
@ -1 +1,20 @@ |
||||
# Design patterns |
||||
# Design Patterns |
||||
|
||||
Design patterns are solutions to common problems in software development that can be used to improve the quality and maintainability of your code. Here are some popular design patterns that are commonly used in Flutter development: |
||||
|
||||
- Model-View-Controller (MVC) |
||||
- Model-View-ViewModel (MVVM) |
||||
- Provider Pattern |
||||
- Bloc Pattern |
||||
- Singleton Pattern |
||||
- Factory Pattern |
||||
- Builder Pattern |
||||
- Composite Pattern |
||||
|
||||
When choosing a design pattern for your Flutter application, consider your specific requirements and use cases. You may also want to consider the trade-offs between different patterns, such as maintainability, scalability, and ease of use. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Flutter - Design](https://dart.dev/guides/language/effective-dart/design) |
||||
- [Design Patterns Explained in 10 Minutes](https://www.youtube.com/watch?v=tv-_1er1mWI) |
||||
- [Cookbook Designs in Flutter](https://docs.flutter.dev/cookbook/design) |
||||
@ -1 +1,8 @@ |
||||
# Solid principles |
||||
# SOLID Principles |
||||
|
||||
|
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [S.O.L.I.D Principles](https://www.youtube.com/watch?v=fvNTJang7l4) |
||||
- [Overview of S.O.L.I.D Principles In Dart](https://medium.flutterdevs.com/s-o-l-i-d-principles-in-dart-e6c0c8d1f8f1) |
||||
@ -1 +1,8 @@ |
||||
# Oop |
||||
# OOP |
||||
|
||||
Object-oriented programming (OOP) is a programming paradigm that is based on the concept of "objects," which are instances of a class. In OOP, a class is a blueprint for creating objects, which have both data (attributes) and behavior (methods). The main idea behind OOP is to model real-world objects and their interactions, making it well-suited for creating complex and large-scale software systems. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Discover Object Oriented Programming](https://blog.hubspot.com/website/object-oriented-programming) |
||||
- [Software Development Tutorial - What is object-oriented language?s](https://www.youtube.com/watch?app=desktop&v=SS-9y0H3Si8) |
||||
@ -1 +1,17 @@ |
||||
# Design principles |
||||
# Design Principles |
||||
|
||||
Here are some common design principles that are often followed in Flutter development: |
||||
|
||||
- Material Design: A design system developed by Google that provides a consistent look and feel across all platforms and devices. |
||||
- Responsiveness: Designing the user interface to work seamlessly on different screen sizes and aspect ratios. |
||||
- User-centered Design: Designing the application with the user's needs and goals in mind. |
||||
- Simplicity: Designing the user interface to be simple and intuitive, minimizing the number of steps needed to complete a task. |
||||
- Consistency: Maintaining a consistent look and feel throughout the application, using consistent colors, typography, and layout. |
||||
- Accessibility: Making the application usable by people with disabilities, including screen reader support, keyboard accessibility, and high-contrast mode. |
||||
- Performance: Designing the application to be fast and responsive, even on low-end devices. |
||||
|
||||
By following these design principles, you can create a user-friendly and visually appealing application that provides a great user experience. |
||||
|
||||
Learn more from the following: |
||||
|
||||
- [Design - Principles](https://docs.flutter.dev/cookbook/design) |
||||
@ -1 +1,19 @@ |
||||
# Flutter pub dart pub |
||||
|
||||
`pub` is the package manager for Dart and Flutter, used for managing dependencies and publishing packages. |
||||
|
||||
With `pub`, developers can: |
||||
|
||||
- Search for and download packages from the `pub.dev` repository. |
||||
- Manage dependencies in their projects, including adding, updating, and removing packages. |
||||
- Publish their own packages to `pub.dev` for others to use. |
||||
|
||||
`pub` uses a `pubspec.yaml` file in each project to manage dependencies and define the package metadata. This file includes information such as the package name, version, and dependencies. |
||||
|
||||
In Flutter projects, `pub` is used to manage both Dart packages and Flutter plugins. This makes it easy to find and use packages that extend the functionality of your Flutter application. |
||||
|
||||
`pub` is an essential tool for Dart and Flutter development, providing a centralized repository for packages, making it easier to find, install, and manage dependencies in your projects. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Overview of Dart pub](https://dart.dev/tools/pub/cmd) |
||||
@ -1,7 +1,12 @@ |
||||
# Json |
||||
# JSON |
||||
|
||||
JSON (JavaScript Object Notation) is a simple data interchange format used to communicate with server, store and retrieve data from it. |
||||
JSON (JavaScript Object Notation) is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate. In Flutter, JSON is used for transmitting data between the client and server, typically over an HTTP connection. |
||||
|
||||
Flutter provides a number of libraries for working with JSON data, including the `dart:convert` library, which provides support for encoding and decoding JSON data. |
||||
|
||||
To encode a Dart object to a JSON string, you can use the `jsonEncode` function from the `dart:convert` library. To decode a JSON string to a Dart object, you can use the jsonDecode function. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [JSON and serialization](https://docs.flutter.dev/development/data-and-backend/json) |
||||
- [Using JSON](https://dart.dev/guides/json) |
||||
@ -1 +1,10 @@ |
||||
# Working with apis |
||||
# Working with APIs |
||||
|
||||
Working with APIs in Flutter involves making HTTP requests to a server and processing the responses. Flutter provides a number of libraries for making HTTP requests, including `dart:io` and `http`. |
||||
|
||||
The `http` library is a popular choice for making HTTP requests in Flutter, as it is easy to use and provides support for HTTP methods such as GET, POST, PUT, DELETE, and more. |
||||
|
||||
Learn more from the following resources: |
||||
|
||||
- [Using Google APIs](https://dart.dev/guides/google-apis) |
||||
- [How to work with APIs in Flutter?](https://www.youtube.com/watch?v=uVo7HDWDUEQ) |
||||
@ -1 +1,9 @@ |
||||
# Authentication |
||||
|
||||
Firebase Authentication is a service provided by Firebase that allows you to easily add user authentication to your Flutter app. With Firebase Authentication, you can authenticate users using email and password, phone number, or popular identity providers like Google, Facebook, and more. |
||||
|
||||
To integrate Firebase Authentication into your Flutter app, you need to first create a Firebase project in the Firebase Console and then add the Firebase Authentication package to your Flutter app. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Make Authenticated requests](https://docs.flutter.dev/cookbook/networking/authenticated-requests) |
||||
@ -1 +1,9 @@ |
||||
# Storage |
||||
|
||||
In Flutter, you can use Firebase Storage to store and retrieve binary data, such as images, audio files, and videos. Firebase Storage is a cloud-based storage service provided by Firebase that makes it easy to store and serve large binary data, such as images and videos, in your Flutter app. |
||||
|
||||
To use Firebase Storage in your Flutter app, you need to first create a Firebase project in the Firebase Console and then add the Firebase Storage package to your Flutter app. |
||||
|
||||
Learn more from the following: |
||||
|
||||
- [How to Upload and Retrieve Images from Firebase Storage](https://www.youtube.com/watch?v=sM-WMcX66FI) |
||||
@ -1 +1,7 @@ |
||||
# Firestore |
||||
|
||||
Firebase Firestore is a cloud-based NoSQL document database service provided by Firebase that makes it easy to store, manage, and retrieve data in your Flutter app. Firestore is a flexible, scalable, and easy-to-use database that allows you to store and retrieve data in the form of documents, collections, and fields. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Using Firestore - Flutter](https://www.youtube.com/watch?v=DqJ_KjFzL9I) |
||||
@ -1 +1,13 @@ |
||||
# Push notifications |
||||
# Push Notifications |
||||
|
||||
To implement push notifications in Flutter using Firebase, follow these steps: |
||||
|
||||
- Create a Firebase project and set up a Flutter app. |
||||
- Integrate the Firebase Cloud Messaging (FCM) plugin in your Flutter app. |
||||
- Handle the incoming push notifications in your Flutter app and specify how they should be displayed. |
||||
- Send test push notifications using the Firebase Console or other tools like Postman. |
||||
- Customize your notifications by specifying the notification icon, sound, and vibration pattern. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [How do I set up push notifications?](https://docs.flutter.dev/get-started/flutter-for/android-devs#how-do-i-set-up-push-notifications) |
||||
@ -1 +1,18 @@ |
||||
# Remote config |
||||
# Remote Config |
||||
|
||||
It is a cloud-based service that allows you to change the behavior and appearance of your app without requiring users to download an app update. In Flutter, you can use the firebase_remote_config plugin to access Firebase Remote Config. |
||||
|
||||
Here are the basic steps to implement Firebase Remote Config in a Flutter app: |
||||
|
||||
- Add the firebase_remote_config plugin to your pubspec.yaml file. |
||||
- Initialize the Firebase Remote Config service in your main.dart file. |
||||
- Define the default values for your remote parameters in the Firebase Console or by calling setDefaults method. |
||||
- Fetch the remote parameters from Firebase by calling fetch method. |
||||
- Get the values for the parameters by calling get method and use them in your app. |
||||
- Update the remote parameters in the Firebase Console or by calling activateFetched method. |
||||
|
||||
You can use Remote Config to control the appearance of your app, change the behavior of features, and even A/B test different experiences for your users. |
||||
|
||||
Learn more from the following: |
||||
|
||||
- [Firebase Remote Config](https://www.youtube.com/watch?v=34ExOdNEMXI) |
||||
@ -1 +1,15 @@ |
||||
# Storage |
||||
|
||||
Flutter provides several options for persistent storage, some of which are as follow: |
||||
|
||||
- SharedPreferences: A key-value store for small data. |
||||
- SQLite database: A relational database for structured data. |
||||
- File System: For storing large files and data. |
||||
- Firebase: A real-time database and backend as a service. |
||||
|
||||
All of these storage options are supported through third-party packages, which are easily integrated into a Flutter app. |
||||
|
||||
Visit the following links to learn more: |
||||
|
||||
- [Storage - Flutter Tutorial](https://www.youtube.com/watch?v=UpKrhZ0Hppks) |
||||
- [Cloud Storage in Flutter](https://firebase.flutter.dev/docs/storage/overview/) |
||||
@ -1,7 +1,8 @@ |
||||
# Core libraries |
||||
# Core Libraries |
||||
|
||||
Dart has a rich set of core libraries that provide essentials for many everyday programming tasks such as working on collections of objects (dart:collection), making calculations (dart:math), and encoding/decoding data (dart:convert). |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Core libraries](https://dart.dev/guides/libraries) |
||||
- [Libraries](https://api.flutter.dev/) |
||||
@ -1 +1,16 @@ |
||||
# Lists |
||||
|
||||
Some common ways to display lists in Dart Flutter include: |
||||
|
||||
- ListView widget |
||||
- ListTile widget |
||||
- SingleChildScrollView with Column |
||||
- GridView widget |
||||
- CustomScrollView with Slivers |
||||
|
||||
These widgets allow you to display items in a scrolling list, a grid, or a combination of both. You can customize the appearance of each item using widgets, layouts, and styling. |
||||
|
||||
Learn more from the following: |
||||
|
||||
- [List Class](https://api.flutter.dev/flutter/dart-core/List-class.html) |
||||
- [Dart Programming – List](https://www.geeksforgeeks.org/dart-programming-list/) |
||||
@ -1 +1,16 @@ |
||||
# Collections |
||||
|
||||
In Dart, collections are used to store and manipulate groups of objects. There are several types of collections available, including: |
||||
|
||||
1. List (ordered and indexable) |
||||
2. Set (unordered and unique elements) |
||||
3. Map (key-value pairs) |
||||
4. Queue (ordered and first-in-first-out) |
||||
5. Stack (ordered and last-in-first-out) |
||||
|
||||
These collections are built-in data structures that can be used to store and manipulate data efficiently. They can be used in a variety of scenarios, such as storing user data, managing state, and organizing algorithms. |
||||
|
||||
Learn more from the following: |
||||
|
||||
- [Generic collections in Flutter](https://dart.dev/guides/language/language-tour#generic-collections-and-the-types-they-contain) |
||||
- [Iterable collections](https://dart.dev/codelabs/iterables) |
||||
@ -1 +1,17 @@ |
||||
# Lambdas |
||||
|
||||
Lambdas, also known as anonymous functions, are a fundamental concept in Dart and Flutter. They are a way to create short, inline functions that can be passed as arguments to other functions or assigned to variables. |
||||
|
||||
Here are some common use cases for lambdas in Dart Flutter: |
||||
|
||||
- Event Handlers: You can use lambdas as event handlers for widgets, such as buttons. |
||||
- Callbacks: You can use lambdas as callbacks to pass into functions that execute later. |
||||
- Streams: You can use lambdas to handle events in a Stream. |
||||
- Filtering: You can use lambdas to filter data in a collection using functions like where and `firstWhere`. |
||||
|
||||
Lambdas are defined using the `=>` operator and can take zero or more arguments. They can also contain expressions, statements, and return values. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Lambda functions in Dart](https://medium.com/jay-tillu/lambda-functions-in-dart-7db8b759f07a) |
||||
- [Anonymous Function in Dart | Lambda Function](https://www.youtube.com/watch?v=XTKKQdTAR0U) |
||||
@ -1 +1,14 @@ |
||||
# Functional programming |
||||
# Functional Programming |
||||
|
||||
Functional programming is a programming paradigm that emphasizes immutability, statelessness, and the use of functions to transform data. Dart, being a modern programming language, supports functional programming concepts such as: |
||||
|
||||
- Higher-Order Functions: Dart supports functions that take other functions as arguments and/or return functions as output. |
||||
- Immutable Data: Dart provides support for immutable data structures and encourages the use of these data structures in functional programming. |
||||
- Lambdas/Closures: Dart has support for anonymous functions, also known as lambdas or closures, which can be used to create simple and concise functions. |
||||
- Pure Functions: Dart encourages the use of pure functions, which are functions that have no side effects and always return the same output given the same inputs. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Brief Overview of Functional Programming](https://buildflutter.com/functional-programming-with-flutter/) |
||||
- [Functional Programming in Dart & Flutter](https://yogi-6.medium.com/list/functional-programming-in-dart-flutter-2f3ac9d7fa39) |
||||
- [Functional programming - Flutter](https://docs.flutter.dev/resources/faq) |
||||
@ -1 +1,15 @@ |
||||
# Isolates |
||||
|
||||
Isolates in Flutter are separate execution contexts that run in parallel with each other. They are used to improve performance and concurrency in Flutter applications. Key benefits of using Isolates in Flutter include: |
||||
|
||||
- Improved Performance: Isolates allow you to run intensive computations or blocking operations in the background, without freezing the user interface. |
||||
- Concurrent Execution: Isolates provide a way to run multiple tasks concurrently, allowing you to improve the overall performance of your app. |
||||
- Isolation: Each Isolate runs in its own memory space and is isolated from other Isolates. This makes it easier to write reliable and secure code. |
||||
- Communication: Flutter provides a mechanism for communicating between Isolates, allowing them to share data and coordinate their work. |
||||
|
||||
Isolates are created using the `Isolate` class and can be used for a variety of tasks, such as network operations, long-running computations, or background tasks. When using Isolates, it's important to be mindful of the cost of context-switching and communication between Isolates. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [How isolates work](https://dart.dev/guides/language/concurrency#how-isolates-work) |
||||
- [Dart - Isolates and event loops](https://medium.com/dartlang/dart-asynchronous-programming-isolates-and-event-loops-bffc3e296a6a) |
||||
@ -1 +1,13 @@ |
||||
# Async await |
||||
# Async Await |
||||
|
||||
It is a programming pattern in Flutter that makes it easier to write asynchronous code. It allows you to write asynchronous code that looks and behaves like synchronous code. |
||||
|
||||
- **async**: The async keyword is used to mark a function as asynchronous, which means that the function can run asynchronously and not block the main thread. |
||||
- **await**: The await keyword is used inside an async function to wait for the result of an asynchronous operation before continuing the execution of the function. |
||||
|
||||
With `async`/`await`, you can write asynchronous code that is easy to read, write, and maintain. |
||||
|
||||
Learn more from the following resources: |
||||
|
||||
- [Asynchronous programming: async, await](https://dart.dev/codelabs/async-await) |
||||
- [Async widgets](https://docs.flutter.dev/development/ui/widgets/async) |
||||
@ -1 +1,7 @@ |
||||
# Streams |
||||
|
||||
Streams in Flutter are a way to receive data over time as it becomes available. They are similar to observables in other languages and frameworks. Streams can be used for things like getting real-time updates from a server, or listening for changes in user input. In Flutter, streams are represented by the `Stream` class and can be listened to using the `StreamBuilder` widget. |
||||
|
||||
Learn more from the following resources: |
||||
|
||||
- [Creating streams in Dart](https://dart.dev/articles/libraries/creating-streams) |
||||
@ -1 +1,13 @@ |
||||
# Futures |
||||
|
||||
Futures in Flutter are a way of representing a potential value that will be available at some point in the future. Some key points about Futures in Flutter: |
||||
|
||||
- Futures are used for asynchronous programming in Flutter |
||||
- Futures return a single value (or an error) and are often used with `async` and `await`. |
||||
- The `then` method can be used to attach a callback to a Future that will be executed once the Future's value is available |
||||
- Futures can be combined with other Futures using `Future.wait` or `Future.whenComplete` methods |
||||
- Futures are often used with network requests, file I/O operations, and other long-running tasks in Flutter. |
||||
|
||||
Learn more from the following resources: |
||||
|
||||
- [Futures and Error handling](https://dart.dev/guides/libraries/futures-error-handling) |
||||
@ -1 +1,20 @@ |
||||
# Advanced dart |
||||
# Advanced Dart |
||||
|
||||
Here are some advanced concepts in Dart that are commonly used in Flutter development: |
||||
|
||||
- Generics: allows creating reusable code by abstracting over types |
||||
- Async/Await: simplifies asynchronous programming by allowing to wait for a Future to complete in a clean, readable way. |
||||
- Mixins: lets classes inherit behaviors from multiple mixin classes |
||||
- Abstract Classes: provide a base class that can be extended to create multiple concrete implementations. |
||||
- Streams: provide a way to receive a continuous sequence of events, like data from a server or user events. |
||||
- Isolates: allow running Dart code in separate threads with communication through message passing. |
||||
- Futures: represent a value that will be available at some point in the future. |
||||
- Null-aware operators (??, ?.): provide a concise way to handle null values. |
||||
- Collection literals: provide concise syntax for creating collections. |
||||
- Extension Methods: allow adding methods to existing classes, even if you don't have access to their source code. |
||||
|
||||
By mastering these concepts, you will be able to write more efficient and maintainable Dart code in your Flutter projects. |
||||
|
||||
Learn more from the following resources: |
||||
|
||||
- [Tutorials - Dart](https://dart.dev/tutorials) |
||||
@ -1 +1,10 @@ |
||||
# Bloc |
||||
# BloC |
||||
|
||||
Bloc (Business Logic Component) is a state management pattern used in Flutter to separate presentation logic from business logic. It helps to manage and maintain the app state, making it easier to test, debug, and reuse code. It uses streams to emit new states and reacts to changes in the state. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Get started with flutter_bloc](https://pub.dev/packages/flutter_bloc) |
||||
- [BLoC in Flutter](https://docs.flutter.dev/development/data-and-backend/state-mgmt/options#bloc--rx) |
||||
- [Flutter bloc for beginners](https://medium.com/flutter-community/flutter-bloc-for-beginners-839e22adb9f5) |
||||
- [Flutter Bloc - Tutorial](https://www.youtube.com/watch?v=Ep6R7U9wa0U) |
||||
@ -1 +1,8 @@ |
||||
# Velocity x |
||||
# VelocityX |
||||
|
||||
VelocityX is a Flutter UI toolkit for building high-performance, visually stunning, and easy-to-use mobile applications. It provides a set of pre-designed widgets, animations, and styles that can be combined to create beautiful and responsive apps quickly. VelocityX also includes features like dark mode, RTL support, and responsive design, making it a comprehensive solution for building modern mobile apps. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Get started with VelocityX](https://velocityx.dev/) |
||||
- [Intro to velocity_x](https://pub.dev/packages/velocity_x) |
||||
@ -1 +1,8 @@ |
||||
# Get x |
||||
# GetX |
||||
|
||||
GetX is a lightweight and powerful solution for state management and navigation in Flutter. It provides a clean and simple API for managing app state and navigating between screens. GetX makes it easy to create scalable and maintainable apps, as it offers a central place to manage the app's state, reducing the amount of boilerplate code needed. It also provides out-of-the-box support for routing, making it easy to navigate between screens, and it supports hot reloading, which allows developers to see changes in real-time. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [GetX in Flutter](https://docs.flutter.dev/development/data-and-backend/state-mgmt/options#getx) |
||||
- [Complete GetX State Management | Flutter](https://www.youtube.com/watch?v=CNpXbeI_slw) |
||||
@ -1,7 +1,9 @@ |
||||
# Redux |
||||
# ReduX |
||||
|
||||
A set of utilities that allow you to easily consume a Redux Store to build Flutter Widgets. |
||||
Redux is a state management library for Flutter, commonly used with the Flutter framework to manage the application's state. It helps to maintain a single source of truth for the state of the application, making it easier to understand, test and maintain the code. In Redux, the state is stored in a store and can only be updated through dispatching actions. The actions trigger the update of the state via reducers, which are pure functions that determine the next state based on the current state and the dispatched action. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [flutter_redux](https://pub.dev/packages/flutter_redux) |
||||
- [Redux - Tutorial](https://docs.flutter.dev/development/data-and-backend/state-mgmt/options#redux) |
||||
- [Building a Flutter app with Redux](https://hillel.dev/2018/06/01/building-a-large-flutter-app-with-redux/) |
||||
@ -1 +1,16 @@ |
||||
# State management |
||||
# State Management |
||||
|
||||
State management in Flutter refers to the process of managing and updating the data or state of a Flutter application. In Flutter, the state of the widgets can change dynamically, for example, when a user interacts with the application. The state management techniques in Flutter include: |
||||
|
||||
- ScopedModel: a third-party state management solution that uses a centralized model to manage the state. |
||||
- Provider: a lightweight solution that allows widgets to access the state with minimal boilerplate code. |
||||
- BLoC (Business Logic Component): a state management technique that uses streams and reactive programming to manage the state. |
||||
- Redux: a state management solution inspired by the Redux library in React. |
||||
- InheritedWidget: a built-in widget that allows the state to be passed down the widget tree. |
||||
|
||||
The choice of state management technique depends on the complexity and size of the project. For smaller projects, Provider or InheritedWidget may be sufficient, while larger projects may require a more robust solution like ScopedModel or Redux. |
||||
|
||||
Learn more from the following resources: |
||||
|
||||
- [State management in Flutter](https://docs.flutter.dev/development/data-and-backend/state-mgmt) |
||||
- [Intro to State Management](https://docs.flutter.dev/development/data-and-backend/state-mgmt/intro) |
||||
@ -1 +1,15 @@ |
||||
# Animation controller |
||||
# AnimationController |
||||
|
||||
This class lets you perform tasks such as: |
||||
|
||||
- Play an animation forward or in reverse, or stop an animation. |
||||
- Set the animation to a specific value. |
||||
- Define the upperBound and lowerBound values of an animation. |
||||
- Create a fling animation effect using a physics simulation. |
||||
|
||||
By default, an AnimationController linearly produces values that range from 0.0 to 1.0, during a given duration. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [AnimationController - Flutter](https://docs.flutter.dev/development/ui/animations/tutorial#animationcontroller) |
||||
- [AnimationController class](https://api.flutter.dev/flutter/animation/AnimationController-class.html) |
||||
@ -1 +1,8 @@ |
||||
# Animated builder |
||||
# AnimatedBuilder |
||||
|
||||
AnimatedBuilder is a widget in Flutter that allows you to build animations. It takes an `Animation` object and a builder function as input, and it returns a widget that is rebuilt whenever the animation changes. The builder function is called with the BuildContext and the animation object and it should return the widget that should be animated. This can be used to create complex animations with ease, without having to manage animation state or listen to animation events in the widget tree. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [AnimatedBuilder Class](https://api.flutter.dev/flutter/widgets/AnimatedBuilder-class.html) |
||||
- [Refactoring with AnimatedBuilders](https://docs.flutter.dev/development/ui/animations/tutorial#refactoring-with-animatedbuilder) |
||||
@ -1,7 +1,9 @@ |
||||
# Hero |
||||
|
||||
Flying an image from one screen to another is called a hero animation in Flutter, though the same motion is sometimes referred to as a shared element transition. |
||||
Hero is a widget in Flutter that allows you to create smooth animations between screens or within a single screen, for widgets that are used in multiple places. It animates the transition of a widget from one screen to another or from one position to another within a screen. The widget that is being animated should have a unique tag property so that Flutter can match the source and destination widgets. Hero widgets are used for visual continuity between screens, so when the user navigates from one screen to another, the hero widget smoothly transitions to its new position instead of abruptly appearing or disappearing. This can make the navigation between screens feel more seamless and enjoyable for the user. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Hero animations](https://docs.flutter.dev/development/ui/animations/hero-animations) |
||||
- [HeroAnimation class](https://docs.flutter.dev/development/ui/animations/hero-animations#heroanimation-class) |
||||
- [Hero class](https://api.flutter.dev/flutter/widgets/Hero-class.html) |
||||
@ -1,7 +1,8 @@ |
||||
# Opacity |
||||
|
||||
The AnimatedOpacity widget makes it easy to perform opacity animations. |
||||
Opacity is a Flutter widget that allows you to control the transparency of its child widget. It takes a single opacity argument, which is a value between 0.0 and 1.0, where 0.0 represents complete transparency and 1.0 represents complete opacity. The child widget is drawn with the specified opacity, making it appear translucent or transparent, depending on the value of the opacity argument. This can be useful for creating visual effects such as fading in or out, or to create partially transparent backgrounds or overlays. By using Opacity in combination with other widgets and animations, you can create sophisticated visual effects in your Flutter app. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Fade a widget in and out](https://docs.flutter.dev/cookbook/animation/opacity-animation) |
||||
- [AnimatedOpacity widget](https://docs.flutter.dev/codelabs/implicit-animations#animate-opacity-with-animatedopacity-widgets) |
||||
@ -1,7 +1,11 @@ |
||||
# Unit testing |
||||
# Unit Testing |
||||
|
||||
Unit testing in Flutter is the process of testing individual units of code, such as functions or classes, to ensure that they behave as expected. Unit testing helps to catch bugs early in the development process and increases the confidence in your code by making it easier to refactor or make changes without breaking existing functionality. |
||||
|
||||
In Flutter, you can write unit tests using the test package, which provides a testing framework and various test utilities. You can write tests that run on the Dart VM or on a physical device or emulator. The tests are written using a combination of Dart code and special test functions provided by the test package. You can use assert statements to verify the behavior of your code, and the testing framework will report whether the tests pass or fail. |
||||
|
||||
Unit tests are handy for verifying the behavior of a single function, method, or class. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [An introduction to unit testing](https://docs.flutter.dev/cookbook/testing/unit/introduction) |
||||
- [Unit tests - Flutter](https://docs.flutter.dev/testing#unit-tests) |
||||
@ -1,7 +1,12 @@ |
||||
# Widget testing |
||||
# Widget Testing |
||||
|
||||
Flutter provides necessary tools and libraries to test widget classes. |
||||
Widget testing in Flutter is the process of testing the behavior and appearance of individual widgets, in isolation from the rest of your app. It allows you to verify that a widget works correctly, displays the expected output, and behaves correctly in response to user interactions. |
||||
|
||||
In Flutter, you can write widget tests using the `flutter_test` package, which provides a testing framework for writing and running widget tests. A widget test is similar to a unit test, but instead of testing individual functions, you test entire widgets. You can use the `TestWidgetsFlutterBinding` to run your widget tests and simulate user interactions, such as taps, scrolls, and other gestures. |
||||
|
||||
The framework provides several utility functions to help you build and test widgets, such as `pumpWidget`, which allows you to pump a widget and its children into the widget tree and simulate a frame of animation, and `find`, which allows you to search the widget tree for a widget that matches specific criteria. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [An introduction to widget testing](https://docs.flutter.dev/cookbook/testing/widget/introduction) |
||||
- [Widget Tests - Flutter](https://docs.flutter.dev/testing#widget-tests) |
||||
@ -1,7 +1,12 @@ |
||||
# Integration testing |
||||
# Integration Testing |
||||
|
||||
Integration tests check how individual pieces work together as a whole, capture the performance of an application. |
||||
Integration tests in Flutter are tests that verify the behavior of your app as a whole, rather than individual widgets or functions. Integration tests allow you to test the interactions between different parts of your app and verify that the overall behavior of the app is correct. |
||||
|
||||
In Flutter, you can write integration tests using the `flutter_driver` package, which provides a testing framework for writing and running integration tests. An integration test runs on a physical device or an emulator, and uses the `FlutterDriver` class to interact with the app and simulate user interactions, such as taps, scrolls, and gestures. |
||||
|
||||
The framework provides several utility functions to help you interact with your app, such as `tap`, `scroll`, and `enterText`, which allow you to perform actions in your app and verify its behavior. You can also use `waitFor`, which allows you to wait for specific conditions to be met before continuing with the test. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [An introduction to integration testing](https://docs.flutter.dev/cookbook/testing/integration/introduction) |
||||
- [Integration Tests](https://docs.flutter.dev/testing#integration-tests) |
||||
|
||||
@ -1 +1,10 @@ |
||||
# Tdd |
||||
# TDD |
||||
|
||||
Test-driven development (TDD) is a software development methodology in which tests are written before the implementation of the code they are testing. The idea behind TDD is to write a failing test first, then write just enough code to make the test pass, and then refactor the code if necessary. This process is repeated for each new feature or requirement that is added to the app. |
||||
|
||||
In Flutter, TDD can be applied using the `test` and `flutter_test` packages, which provide testing frameworks for writing and running unit tests and widget tests, respectively. TDD can be used to write tests for individual functions, classes, and widgets, as well as integration tests that verify the behavior of the app as a whole. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Test-Driven Development in Flutter](https://techblog.geekyants.com/test-driven-development-in-flutter) |
||||
- [Flutter TDD Clean Architecture Course](https://www.youtube.com/watch?v=KjE2IDphA_U) |
||||
@ -1 +1,10 @@ |
||||
# Bdd |
||||
# BDD |
||||
|
||||
Behavior-driven development (BDD) is a software development methodology that emphasizes collaboration between developers, testers, and stakeholders to define and verify the behavior of an application. BDD uses natural language to describe the expected behavior of the application and provides a shared understanding of the requirements for the development team. |
||||
|
||||
In Flutter, BDD can be applied using the `flutter_driver` package, which provides a testing framework for writing and running integration tests. BDD can be used to write tests that verify the behavior of the app as a whole, rather than individual widgets or functions. |
||||
|
||||
Learn morer from the following links: |
||||
|
||||
- [Build Flutter with BDD](https://medium.com/tide-engineering-team/build-flutter-with-bdd-b4507170a2fe) |
||||
- [Tutorial - BDD in Flutter](https://www.youtube.com/watch?v=Kwvsc31FE_8) |
||||
@ -1 +1,17 @@ |
||||
# Testing |
||||
|
||||
Testing is a crucial part of the development process in Flutter, as it helps you to verify the behavior and appearance of your app and ensure that it behaves correctly and consistently across different devices and platforms. |
||||
|
||||
There are several types of tests that you can write to verify the behavior and appearance of your app: |
||||
|
||||
- Unit tests |
||||
- Widget tests |
||||
- Integration tests |
||||
- Acceptance tests |
||||
|
||||
In Flutter, you can write tests using the test and flutter_test packages, which provide testing frameworks for writing and running unit tests and widget tests, respectively. You can also use the flutter_driver package, which provides a testing framework for writing and running integration tests. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Dart Testing](https://dart.dev/guides/testing) |
||||
- [Testing Flutter apps](https://docs.flutter.dev/testing) |
||||
@ -1 +1,14 @@ |
||||
# Reactive programming |
||||
# Reactive Programming |
||||
|
||||
Reactive programming is a programming paradigm that allows for handling changing data streams and updating the UI based on those changes. In Flutter, reactive programming can be achieved using: |
||||
|
||||
1. Streams: A sequence of asynchronous events. |
||||
2. Futures: A way to represent a single asynchronous operation. |
||||
3. BLoCs (Business Logic Components): A state management pattern that uses streams to separate business logic from UI code. |
||||
|
||||
Reactive programming in Flutter helps create dynamic and responsive apps that can handle changing data and update the UI accordingly. The `StreamBuilder` and `FutureBuilder` widgets are commonly used in Flutter to build reactive UIs. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Get Started with Reactive Programming](https://www.didierboelens.com/2018/12/reactive-programming-streams-bloc-practical-use-cases/) |
||||
- [Reactive Programming in Flutter](https://www.youtube.com/watch?v=x4FKXw4Uvls) |
||||
@ -1,7 +1,15 @@ |
||||
# Flutter inspector |
||||
# Flutter Inspector |
||||
|
||||
The Flutter widget inspector is a powerful tool for visualizing and exploring Flutter widget trees. |
||||
It is a tool in the Flutter SDK that provides a visual representation of the widget tree in a Flutter app. It allows developers to inspect the widgets in their app, see the properties and styles applied to each widget, and interact with the app in real-time. |
||||
|
||||
With the Flutter Inspector, developers can: |
||||
|
||||
1. Debug the widget tree and see how the widgets are laid out. |
||||
2. Modify properties of widgets in real-time to see the impact on the app. |
||||
3. Inspect the properties and styles of individual widgets, and view any errors or warnings. |
||||
4. Measure the performance of the app, including the frame rate and number of widgets. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [Using the Flutter inspector](https://docs.flutter.dev/development/tools/devtools/inspector) |
||||
- [How to Use the Flutter Inspector](https://www.youtube.com/watch?v=CcLfGJZS8ns) |
||||
@ -1 +1,12 @@ |
||||
# Flutter outline |
||||
# Flutter Outline |
||||
|
||||
Flutter Outline is a feature in the Flutter development environment (IDE) that provides a tree-like representation of the widgets and elements in your Flutter app. It shows the hierarchy of the widgets, their relationships, and the structure of your app. |
||||
|
||||
The Flutter Outline can be used to: |
||||
|
||||
- Navigate through your code |
||||
- Understand the widget hierarchy |
||||
- Debug your code |
||||
- Refactor your code |
||||
|
||||
The Flutter Outline is a useful tool for Flutter developers, as it provides a high-level overview of your app and makes it easier to navigate and understand the code. It can help you to write better code and debug your app more efficiently. |
||||
@ -1 +1,9 @@ |
||||
# Memory allocation |
||||
# Memory Allocation |
||||
|
||||
Memory allocation is the process of reserving a portion of the device's memory for the use of your app. The memory allocation in Flutter is managed by the Dart virtual machine, which uses a garbage collector to automatically manage the memory used by the app. |
||||
|
||||
In Flutter, the widgets in the app's widget tree represent the state of the app. When the state changes, the widgets are rebuilt and the previous state's memory is automatically collected by the garbage collector. |
||||
|
||||
Visit the following links: |
||||
|
||||
- [Using the Memory view](https://docs.flutter.dev/development/tools/devtools/memory) |
||||
@ -1 +1,16 @@ |
||||
# Dev tools |
||||
# Dev Tools |
||||
|
||||
Flutter DevTools is a suite of development tools provided by Flutter to help developers build, test, and debug Flutter apps. The tools include: |
||||
|
||||
1. CLI: A command-line interface for managing and building Flutter apps. |
||||
2. Doctor: A tool for diagnosing Flutter installation issues. |
||||
3. Emulator: An emulator for running and testing Flutter apps. |
||||
4. Observatory: A performance profiling tool for Flutter apps. |
||||
5. Dart DevTools: A browser-based suite of development tools for Dart, including a debugger and performance profiling tools. |
||||
6. Hot Reload: A feature that allows developers to see the impact of code changes in real-time. |
||||
7. DevTools Extension: A browser extension that provides advanced debugging and performance profiling capabilities for Flutter apps. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Flutter - DevTools](https://docs.flutter.dev/development/tools/devtools/overview) |
||||
- [Dart DevTools](https://dart.dev/tools/dart-devtools) |
||||
@ -1 +1,9 @@ |
||||
# Immutability |
||||
|
||||
Immutability in Flutter refers to objects that cannot be changed once they are created. In Flutter, immutability is used to ensure that objects in the widget tree are not modified unexpectedly, which can lead to unexpected behavior and bugs in the app. |
||||
|
||||
In Flutter, objects that represent the state of the app, such as widgets and their properties, are considered immutable. When the state of the app changes, a new object is created to represent the new state, and the widget tree is rebuilt with the updated objects. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Immutable data in Flutter](https://dart.academy/immutable-data-patterns-in-dart-and-flutter/) |
||||
@ -1 +1,10 @@ |
||||
# Trees |
||||
|
||||
A tree is a data structure that is used to represent the hierarchy of widgets in a Flutter app. The tree structure allows Flutter to manage the layout, styling, and behavior of the widgets in the app. |
||||
|
||||
A Flutter app's widget tree is created by composing smaller widgets into larger ones, which are then added to the tree. The root node of the tree represents the entire app, while the other nodes represent individual widgets. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Beginning Flutter — Understanding Tree](https://medium.com/@JediPixels/beginning-flutter-understanding-the-widget-tree-3513c94dc356) |
||||
- [Tree in Flutter](https://docs.flutter.dev/resources/inside-flutter#tree-surgery) |
||||
@ -1 +1,13 @@ |
||||
# Flutter internals |
||||
# Flutter Internals |
||||
|
||||
The internal workings of Flutter refer to the underlying mechanisms and architecture that make up the Flutter framework. |
||||
|
||||
At a high level, Flutter is a reactive framework for building user interfaces, which means that it allows developers to build dynamic, responsive apps that update automatically in response to changes in the state of the app. |
||||
|
||||
Flutter achieves this by using a unique rendering engine that is based on the Skia graphics library. The rendering engine allows Flutter to render complex animations and graphics with high performance, and it also provides a way for Flutter to manage the layout and size of widgets in the app. |
||||
|
||||
Visit the following links: |
||||
|
||||
- [Flutter - Internals](https://www.didierboelens.com/2019/09/flutter-internals/) |
||||
- [Overview of Flutter Internals](https://flutter.megathink.com/) |
||||
- [Flutter and Dart | Widget & Flutter Internals](https://www.youtube.com/watch?v=FBXMvOmiOLE) |
||||
@ -1 +1,9 @@ |
||||
# Fast lane |
||||
|
||||
Fastlane is a third-party tool for automating the development and deployment process for mobile apps, including apps built with Flutter. |
||||
|
||||
Fastlane provides a suite of tools for automating tasks such as building, testing, and distributing apps. For example, fastlane can automate the process of building an app, creating a release candidate, and submitting the app to the app store. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Fast Lane - CI/CD in Flutter](https://docs.flutter.dev/deployment/cd) |
||||
@ -1 +1,10 @@ |
||||
# Codemagic |
||||
|
||||
Codemagic is a cloud-based continuous integration and delivery (CI/CD) platform specifically designed for Flutter mobile app development. |
||||
|
||||
Codemagic provides a simple and efficient way for Flutter developers to automate the build, test, and deployment process for their apps. It integrates with the Flutter framework and allows developers to configure the build process, run tests, and distribute the app to various app stores with just a few clicks. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Codemagic - Flutter](https://codemagic.io/start/) |
||||
- [Create a build archive with Codemagic](https://docs.flutter.dev/deployment/ios#create-a-build-archive-with-codemagic-cli-tools) |
||||
@ -1 +1,9 @@ |
||||
# Bitrise |
||||
|
||||
Bitrise is a cloud-based continuous integration and delivery (CI/CD) platform that can be used with Flutter mobile app development. |
||||
|
||||
Bitrise provides a comprehensive suite of tools for automating the build, test, and deployment process for mobile apps, including apps built with Flutter. With Bitrise, developers can automate tasks such as building the app, running tests, and distributing the app to various app stores. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Adding a Flutter app to Bitrise](https://devcenter.bitrise.io/en/getting-started/getting-started-with-flutter-apps) |
||||
@ -1 +1,17 @@ |
||||
# Github actions |
||||
# Github Actions |
||||
|
||||
GitHub Actions is a workflow automation tool provided by GitHub that can be used to automate various tasks in a Flutter mobile app development process. |
||||
|
||||
With GitHub Actions, developers can create custom workflows to automate tasks such as building the app, running tests, and deploying the app to various app stores. These workflows are defined as a series of actions in a YAML file, which can be committed to the repository. |
||||
|
||||
In a Flutter project, GitHub Actions can be used to: |
||||
|
||||
- Automate the build process |
||||
- Run tests |
||||
- Deploy to multiple app stores |
||||
- Monitor the build process |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Github Actions](https://github.com/features/actions) |
||||
- [Flutter - Github Actions](https://github.com/nabilnalakath/flutter-githubaction) |
||||
@ -1 +1,9 @@ |
||||
# Firebase app distribution |
||||
# Firebase App Distribution |
||||
|
||||
Firebase App Distribution is a service provided by Firebase, a mobile development platform owned by Google, that makes it easy to distribute pre-release versions of a mobile app to testers and stakeholders. |
||||
|
||||
With Firebase App Distribution, developers can upload a pre-release version of their Flutter mobile app to the Firebase platform, and then invite testers and stakeholders to download and test the app. Testers and stakeholders can provide feedback directly from the app, making it easier for developers to fix bugs and make improvements before releasing the app to the general public. |
||||
|
||||
To learn more visit the following links: |
||||
|
||||
- [Firebase Hosting](https://firebase.google.com/docs/hosting) |
||||
@ -1 +1,16 @@ |
||||
# Ci cd |
||||
# CI/CD |
||||
|
||||
CI/CD (Continuous Integration and Continuous Deployment) is a software development practice that helps to automate the process of building, testing, and deploying mobile apps, including Flutter apps. |
||||
|
||||
With CI/CD, developers can automate the build, test, and deployment process for their Flutter apps, making it easier to catch bugs and deploy new features quickly and efficiently. |
||||
|
||||
The key components of a CI/CD pipeline for a Flutter app are: |
||||
|
||||
- Version control |
||||
- Automated builds |
||||
- Automated testing |
||||
- Deployment |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [CI/CD - Flutter](https://docs.flutter.dev/deployment/cd) |
||||
@ -1 +1,16 @@ |
||||
# Segment |
||||
|
||||
Segment is an analytics platform that provides a single API for collecting, storing, and routing customer data from various sources, including mobile apps built with Flutter. |
||||
|
||||
With Segment, Flutter developers can easily add analytics tracking to their app, without having to integrate with multiple analytics tools individually. Segment acts as a single point of integration, allowing developers to send data to multiple analytics tools with a single API. |
||||
|
||||
Some key features of Segment for Flutter apps include: |
||||
|
||||
- Data collection |
||||
- Data routing |
||||
- Data storage |
||||
- User tracking |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Doc of flutter_segment](https://pub.dev/packages/flutter_segment) |
||||
@ -1 +1,17 @@ |
||||
# Mixpanel |
||||
|
||||
Mixpanel is a product analytics platform that provides insights into user behavior for mobile apps, including those built with Flutter. |
||||
|
||||
With Mixpanel, Flutter developers can track user interactions with their app, including page views, events, and user properties, and use this data to gain insights into user behavior. Mixpanel provides a range of tools and features for analyzing this data, including real-time dashboards, segmentation, and A/B testing. |
||||
|
||||
Some key features of Mixpanel for Flutter apps include: |
||||
|
||||
- User tracking |
||||
- Real-time dashboards |
||||
- Segmentation |
||||
- A/B testing |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Overview of Flutter Mixpanel](https://levelup.gitconnected.com/flutter-web-mixpanel-6046ffb664fb) |
||||
- [Flutter Mixpanel Analytics Integration](https://medium.com/flutter-clan/flutter-mixpanel-analytics-integration-b5840b155f7b) |
||||
@ -1 +1,10 @@ |
||||
# Firebase analytics |
||||
# Firebase Analytics |
||||
|
||||
Firebase Analytics is a free analytics tool provided by Google that helps to understand user behavior and measure app performance for mobile apps, including those built with Flutter. |
||||
|
||||
With Firebase Analytics, Flutter developers can track user interactions with their app, including page views, events, and user properties, and use this data to gain insights into user behavior. Firebase Analytics provides a range of tools and features for analyzing this data, including real-time dashboards, user segmentation, and funnels. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Flutter - Firebase](https://docs.flutter.dev/development/data-and-backend/firebase) |
||||
- [How To Add Firebase Analytics in Flutter](https://medium.datadriveninvestor.com/how-to-add-firebase-analytics-to-your-flutter-app-641fbda1d224?gi=ad489389a531) |
||||
@ -1 +1,9 @@ |
||||
# Google analytics |
||||
# Google Analytics |
||||
|
||||
Google Analytics is a free web analytics service provided by Google that helps to understand user behavior and measure app performance for mobile apps, including those built with Flutter. |
||||
|
||||
With Google Analytics, Flutter developers can track user interactions with their app, including page views, events, and user properties, and use this data to gain insights into user behavior. Google Analytics provides a range of tools and features for analyzing this data, including real-time dashboards, user segmentation, and funnels. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Google Analytics for Firebase](https://firebase.flutter.dev/docs/analytics/overview/) |
||||
@ -1 +1,13 @@ |
||||
# Analytics |
||||
|
||||
Analytics is a key aspect of understanding user behavior and measuring app performance for Flutter apps. There are a number of analytics tools available for Flutter apps, each with their own set of features and benefits. Some of the most popular analytics tools for Flutter include: |
||||
|
||||
1. Firebase Analytics: A free analytics tool provided by Google that helps to understand user behavior and measure app performance for mobile apps. |
||||
2. Google Analytics: A free web analytics service provided by Google that helps to understand user behavior and measure app performance for mobile apps. |
||||
3. Mixpanel: A paid analytics tool that provides a range of features for tracking user behavior, including real-time dashboards, user segmentation, and funnels. |
||||
4. Segment: A paid analytics tool that provides a range of features for tracking user behavior, including real-time dashboards, user segmentation, and funnels. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Flutter Analytics using Firebase](https://www.youtube.com/watch?v=31KpJXqCayo) |
||||
- [Top Flutter Analytics](https://fluttergems.dev/analytics-consumer-insights/) |
||||
@ -1 +1,9 @@ |
||||
# Appstore |
||||
|
||||
App Store is an important platform to consider when publishing Flutter apps. To publish an app on the App Store, developers need to have a developer account with Apple, which requires an annual fee. |
||||
|
||||
To publish a Flutter app on the App Store, developers need to ensure that their app meets Apple's guidelines and requirements, which include guidelines for performance, design, and user experience. Once the app has been reviewed and approved by Apple, it can be published on the App Store and made available for download to iOS users. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Build and release an iOS app](https://docs.flutter.dev/deployment/ios) |
||||
@ -1 +1,16 @@ |
||||
# Guidelines and protocols |
||||
# Guidelines and Protocols |
||||
|
||||
Guidelines and protocols are important considerations for Flutter developers as they help to ensure that apps are built in a consistent, reliable, and user-friendly manner. Some of the key guidelines and protocols to consider when developing a Flutter app include: |
||||
|
||||
- Flutter Widget |
||||
- Dart Style |
||||
- Material Design |
||||
- Apple Human Interface |
||||
- Google Play Developer Policy Center |
||||
- App Store Review |
||||
|
||||
By following these guidelines and protocols, Flutter developers can ensure that their apps are well-designed, user-friendly, and secure, making it easier to attract and retain users. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Flutter - Protocols](https://api.flutter.dev/objcdoc/Protocols.html) |
||||
@ -1 +1,15 @@ |
||||
# Deployment |
||||
|
||||
Deployment in Flutter refers to the process of releasing a Flutter app to end-users. There are several steps involved in deploying a Flutter app, including: |
||||
|
||||
- Building the app |
||||
- Testing the app |
||||
- Configuring app settings |
||||
- Releasing to app stores |
||||
- Updating the app |
||||
|
||||
In general, deploying a Flutter app involves a combination of technical skills and experience, as well as knowledge of the relevant app stores and their policies and requirements. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Flutter - Web deployment](https://dart.dev/web/deployment) |
||||
Loading…
Reference in new issue