Week 1 - Introduction to Flutter and Dart PDF

Week 1 – Introduction to Flutter and Dart CTMOBPGL – Mobile Programming At the end of the session, the students shall be able to: Identify and classify the different types of mobile applications Understand the mobile app development process Analyze the tools and technologies used in...

Week 1 – Introduction to Flutter and Dart CTMOBPGL – Mobile Programming At the end of the session, the students shall be able to: Identify and classify the different types of mobile applications Understand the mobile app development process Analyze the tools and technologies used in mobile app development Compare and contrast Flutter with other mobile development frameworks Evaluate key considerations in mobile app development Understand the core concepts and features of Flutter Overview of Mobile App Development Mobile app development is the process of creating software applications that run on mobile devices such as smartphones and tablets. These applications can be pre-installed on the device or downloaded from app stores and are designed to leverage the unique features and capabilities of mobile devices. Here's an overview of mobile app development: 1. Types of Mobile Apps A. Native Apps: Native apps are mobile applications specifically developed for a single platform, such as iOS or Android, using platform-specific programming languages and tools. These apps are designed to take full advantage of the operating system's features, resulting in optimal performance and seamless integration with device hardware and software. Key Characteristics of Native Apps a. Platform-Specific: o Written in languages that are specific to the target platform: ▪ iOS: Swift, Objective-C. ▪ Android: Kotlin, Java. o Developed using platform-specific tools like Xcode (for iOS) and Android Studio (for Android). Key Characteristics of Native Apps b. High Performance: Optimized to run efficiently on the native operating system. Better responsiveness and speed compared to hybrid or web apps. c. Access to Device Features: o Direct access to device hardware and APIs, such as: ▪ Camera, GPS, microphone. ▪ Push notifications, Bluetooth, and sensors. Key Characteristics of Native Apps d) Rich User Experience: o Follows platform-specific design guidelines: ▪ Material Design for Android. ▪ Human Interface Guidelines for iOS. o Ensures a familiar and intuitive user interface for users. e) Offline Functionality: o Often supports offline use since they are stored locally on the device. Advantages of Native Apps a) Superior Performance: o Fully optimized for the specific operating system. o Better for graphics-heavy applications like gaming and AR/VR apps. b) Enhanced User Experience: o Smooth interactions and native look-and-feel. Advantages of Native Apps c) Better Security: o Built-in platform security features and encrypted data storage. d) Access to Advanced Features: o Can utilize the latest OS features immediately after release. Disadvantages of Native Apps a) Higher Development Costs: o Separate codebases are required for different platforms, leading to increased time and expenses. b) Longer Development Time: o Building and maintaining apps for multiple platforms takes more effort. c) Platform Dependency: o Updates and maintenance must align with changes in the operating system. Some of the Popular Native Apps Social Media Apps Facebook (iOS, Android) Instagram (iOS, Android) Twitter (now X) (iOS, Android) Snapchat (iOS, Android) TikTok (iOS, Android) LinkedIn (iOS, Android) Some of the Popular Native Apps Messaging Apps WhatsApp (iOS, Android) Telegram (iOS, Android) Messenger (iOS, Android) WeChat (iOS, Android) Some of the Popular Native Apps Messaging Apps WhatsApp (iOS, Android) Telegram (iOS, Android) Messenger (iOS, Android) WeChat (iOS, Android) Some of the Popular Native Apps Entertainment and Streaming YouTube (iOS, Android) Netflix (iOS, Android) Spotify (iOS, Android) Disney+ (iOS, Android) Amazon Prime Video (iOS, Android) Some of the Popular Native Apps Productivity Apps Google Drive (iOS, Android) Microsoft Office (Word, Excel, PowerPoint) (iOS, Android) Evernote (iOS, Android) Trello (iOS, Android) Some of the Popular Native Apps Shopping Apps Amazon (iOS, Android) eBay (iOS, Android) Shopee (iOS, Android) Walmart (iOS, Android) Lazada (iOS, Android) Some of the Popular Native Apps Finance & Banking PayPal (iOS, Android) Some of the Popular Native Apps Travel & Navigation Google Maps (iOS, Android) Uber (iOS, Android) Airbnb (iOS, Android) Booking.com (iOS, Android) Some of the Popular Native Apps Photography and Editing Snapseed (iOS, Android) VSCO (iOS, Android) Adobe Lightroom (iOS, Android) PicsArt (iOS, Android) Cross-Platform Apps Cross-platform apps are mobile applications that use a single codebase to run on multiple platforms, such as iOS and Android. These apps are developed using specialized frameworks that allow developers to write code once and deploy it across different operating systems, saving time and effort compared to native development. Key Characteristics of Cross-Platform Apps a) Single Codebase: o A unified codebase is used to target multiple platforms, reducing development effort and cost. b) Platform Compatibility: o Frameworks translate the shared code into platform-specific components, ensuring compatibility. Key Characteristics of Cross-Platform Apps c) Near-Native Performance: o Modern cross-platform frameworks like Flutter and React Native offer performance comparable to native apps. d) Reusable UI Components: o Allows for consistent user interfaces across platforms while enabling customization for specific platform behaviors. Advantages of Cross-Platform Apps a) Cost-Effectiveness: o Reduces the need for separate development teams for each platform. b) Faster Development: o Shared codebase leads to shorter development cycles. Advantages of Cross-Platform Apps c) Wider Reach: o Apps can target both Android and iOS users simultaneously, increasing market exposure. d) Easier Maintenance: o Fixing bugs and updating features can be done once for all platforms. e) Consistency Across Platforms: o Offers a uniform user experience regardless of the device. Disadvantages of Cross-Platform Apps a) Performance Limitations: o May not perform as well as native apps for resource-intensive tasks (e.g., gaming, AR/VR). b) Limited Access to Device Features: o May require additional native code for complex or advanced hardware features. Disadvantages of Cross-Platform Apps c) Framework Dependency: o Apps depend on the capabilities and updates of the chosen cross- platform framework. d) Customization Challenges: o Achieving a truly native feel for platform-specific elements can be more complex. Some of the Popular Cross Platform Apps Social Media Apps Facebook (iOS, Android, Web) – Built using a mix of native and cross-platform technologies, primarily React Native. Instagram (iOS, Android, Web) – Uses React Native for some parts of the app, though the core features are native. Twitter (iOS, Android, Web) – Cross-platform with some parts of the app developed using Flutter. Pinterest (iOS, Android, Web) – Uses a combination of React Native and native development. Some of the Popular Cross Platform Apps Messaging Apps WhatsApp (iOS, Android, Web) – WhatsApp's mobile app is primarily native, but the WhatsApp Web is cross-platform, built with web technologies. Telegram (iOS, Android, Web, Desktop) – Built with a mix of native and cross- platform technologies (React Native, for example). Some of the Popular Cross Platform Apps Productivity and Collaboration Apps Slack (iOS, Android, Web, Desktop) – Built with Electron for desktop, and React Native for mobile versions. Trello (iOS, Android, Web) – Uses React Native for mobile apps. Asana (iOS, Android, Web) – Uses cross-platform technologies (like React Native) alongside native features. Some of the Popular Cross Platform Apps Entertainment & Streaming Spotify (iOS, Android, Web) – Uses a mix of native and cross-platform technologies, including some React Native components. Netflix (iOS, Android, Web) – Initially built with native technologies but has incorporated cross-platform frameworks like React Native in certain parts. Some of the Popular Cross Platform Apps Gaming Apps Minecraft (iOS, Android, Windows, Console) – Uses a mix of cross-platform development for mobile and other platforms. Fortnite (iOS, Android, Console, PC) – Epic Games uses cross-platform development to support multiple platforms with a single codebase. Web Apps Web apps are software applications that run on a web browser rather than being installed directly on a device. They are built using standard web technologies such as HTML, CSS, and JavaScript, and are accessed via a URL. Web apps are responsive and can adapt to different devices, including desktops, tablets, and smartphones. Key Characteristics of Web Apps a) Platform Independence: o Accessible from any device with a web browser and internet connection. o No need for platform-specific development. b) Responsiveness: o Designed to work seamlessly on various screen sizes and resolutions. c) No Installation Required: o Users access the app through a URL, eliminating the need for app store downloads. Key Characteristics of Web Apps d) Centralized Updates: o Updates are made on the server side and instantly available to all users. e) Limited Device Integration: o Can access some device features through APIs (e.g., geolocation, camera) but less comprehensive than native apps. Advantages of Web Apps a) Cross-Platform Compatibility: o A single version works on all devices with a modern browser. b)Cost-Effective: o Development and maintenance are more affordable compared to native or cross-platform apps. c) Ease of Deployment: o No need to go through app store approval processes. Advantages of Web Apps d) Automatic Updates: o Users always have the latest version without manual updates. e) Wider Reach: o Accessible to anyone with a web browser, increasing potential audience. Disadvantages of Web Apps a) Dependency on Internet Connection: o Many web apps require an active internet connection to function. b)Limited Performance: o Slower than native apps, especially for resource-intensive tasks. Disadvantages of Web Apps c) Restricted Access to Device Features: o Limited integration with device hardware and OS capabilities. d) Browser Compatibility Issues: o Inconsistent behavior across different browsers if not properly optimized. 2. Development Process The mobile app development process typically includes: 1. Planning and analysis: This phase involves defining the scope of the project, identifying the project's stakeholders, and assessing the feasibility of the project. 2. Design: This phase involves creating a detailed blueprint for the system, including its architecture, user interface, and data structures. 2. Development Process 3. Development: This phase involves coding the system and building the infrastructure needed to support it. 4. Testing: This phase involves testing the system to ensure that it meets the requirements of the stakeholders and functions as intended. 2. Development Process 5. Deployment: This phase involves releasing the system to the end users and making it available for production. 6. Maintenance: This phase involves ongoing support of the system, including fixing bugs, updating features, and applying security patches. 3. Tools and Technologies Programming Languages: o Native: Swift, Kotlin, Java. o Cross-Platform: Dart (Flutter), JavaScript/TypeScript (React Native), C# (Xamarin). o Web: HTML, CSS, JavaScript. 3. Tools and Technologies Frameworks: o Flutter, React Native, Ionic, Xamarin, Apache Cordova. Development Environments: o Android Studio, Xcode, Visual Studio Code. APIs and SDKs: o Use platform-specific SDKs and APIs for enhanced functionality (e.g., GPS, camera, sensors). 4. Key Considerations User Experience (UX): Ensure seamless navigation, responsiveness, and accessibility. Performance: Optimize for speed, responsiveness, and low battery consumption. Security: Protect user data through encryption, authentication, and secure APIs. Compatibility: Test the app across various devices, screen sizes, and operating system versions. Monetization: Consider revenue models like in-app purchases, ads, or subscriptions. How to install Flutter on Windows 2024 Setup Android Studio for Flutter Step by Step https://www.youtube.com/watch?v=mMeQhLGD-og  Setup Flutter in Visual Studio Code On Windows - Install Flutter https://www.youtube.com/watch?v=0q802e7MC7A&list=PL555aeDWfjt2usljjjuMgOBgXNOZo1Cus&index=1  Assignment 1. What is Flutter? 2. Differentiate Flutter with React Native 3. Pros and Cons of Flutter 4. What is Dart? 5. Create a simple program that will print your name using dart programming language. References How to install Flutter on Windows 2024 | Setup Android Studio for Flutter Step by Step. Retrieved from https://www.youtube.com/watch?v=mMeQhLGD-og Setup Flutter in Visual Studio Code On Windows - Install Flutter. Retrieved from https://www.youtube.com/watch?v=0q802e7MC7A&list=PL555 aeDWfjt2usljjjuMgOBgXNOZo1Cus&index=1