Flutter Cross Platform Framework PDF

Course Material BSIT Department Flutter Cross Platform Framework  Course Material BSIT Department Learning Outcomes Develop a foundational understanding of Flutter and its role in mobile app development. Recognize the key features and advan...

Course Material BSIT Department Flutter Cross Platform Framework  Course Material BSIT Department Learning Outcomes Develop a foundational understanding of Flutter and its role in mobile app development. Recognize the key features and advantages of using Flutter. Install and set up the Flutter development environment.  Course Material BSIT Department Introduction to Flutter What is Flutter- getting to know Flutter. Setting up Flutter- a guide how to set up the Flutter SDK.  Course Material BSIT Department What is Flutter? Understanding Flutter  Course Material BSIT Department Flutter Flutter is an open-source UI toolkit created by Google for building natively compiled applications for mobile, web, and desktop from a single codebase. It is widely recognized for its efficiency in cross-platform development, allowing developers to write code once and deploy it across multiple platforms without compromising on performance or user experience. Key Features: Single Codebase Hot Reload Rich Set of Widgets High Performance Dart Language Strong Community  Course Material BSIT Department Why Flutter? Time Efficiency: Reduces development time by enabling cross-platform development. Customizable UI: Offers flexibility to create visually appealing and highly customizable designs. Native-Like Performance: Applications built with Flutter are compiled to machine code for faster performance. Open Source: Free to use with frequent updates and community contributions. Feature Flutter React Native Xamarin Native Development Language Dart JavaScript C# Swift/Kotlin Performance High Moderate High Native-level Hot Reload Yes Yes Limited No  Course Material BSIT Department Architectural layers The foundational classes and core services, such as animation, painting, and gestures, provide commonly used abstractions that simplify access to the underlying system. The rendering layer offers a layout abstraction, enabling the creation and manipulation of a tree of renderable objects. These objects can be dynamically adjusted, with the tree automatically updating its layout to reflect any changes. The widgets layer serves as a composition abstraction, linking each render object in the rendering layer to a corresponding class. This layer also facilitates the creation of reusable class combinations and introduces the reactive programming model. The Material and Cupertino libraries provide extensive sets of controls, leveraging the widget layer's compositional tools to implement the Material Design and iOS design systems.  Course Material BSIT Department Anatomy of an app  Course Material BSIT Department Build UI A widget declares its user interface by overriding the build() method, which is a function that converts state to UI  Course Material BSIT Department Setting Up Flutter  Course Material BSIT Department Install Flutter SDK Install | Flutter  Course Material BSIT Department Extract to C: Add to PATH  Course Material BSIT Department Run flutter doctor  Course Material BSIT Department Activity Build an app  Course Material BSIT Department Build your first app Go to VS Code and download the Flutter Extension  Course Material BSIT Department Build your first app Press Ctrl + P and select Flutter: New Project  Course Material BSIT Department Build your first app Select the Application and select a folder that you want to build onto  Course Material BSIT Department Build your first app Select a device to run.  Course Material BSIT Department Build your first app Press Ctrl + ` to see the terminal and type flutter run then enter.  Course Material BSIT Department Q and A  Course Material BSIT Department References https://docs.flutter.dev/resources/architectural-overview https://docs.flutter.dev/get-started/install https://docs.flutter.dev/ui  Course Material BSIT Department Thank you!!  Course Material BSIT Department Flutter User Interface  Course Material BSIT Department Learning Outcomes Comprehend the basics of Flutter User Interface (UI) design. Demonstrate proficiency in creating visually appealing UI components using Flutter. Utilize Flutter's widget system for building responsive and dynamic user interfaces.  Course Material BSIT Department Flutter User Interface Introduction to Widgets Widget Lifecycle Layouts Handling User Input UI Behavior  Course Material BSIT Department Introduction to Widgets Flutter Widgets  Course Material BSIT Department Flutter Widgets Widgets are the basic building blocks of a Flutter application. They are used to construct the user interface (UI) and represent both visible components (like buttons, text, and images) and invisible components (like layout structures and padding). Always remember:  Course Material BSIT Department Widget Tree  Course Material BSIT Department Standard Widgets In Flutter, widgets are the fundamental building blocks of the user interface, encapsulating both the visual elements and their behavior. Flutter offers a diverse set of widgets categorized into standard widgets and Material Design widgets, each serving distinct purposes in UI development. Standard widgets are the core components provided by Flutter, independent of any specific design language. They offer basic functionalities and can be customized to fit various design requirements. Container: Enhances a widget with additional features like padding, margins, borders, background colors, or other decorative elements. GridView: Arranges widgets in a grid layout that supports scrolling. ListView: Organizes widgets in a vertically scrollable list. Stack: Allows widgets to be layered on top of one another.  Course Material BSIT Department Container Containers are widely used in layouts to add padding, borders, or margins between widgets. To customize the device's background, you can wrap the entire layout in a Container and set its background color or image. Apply padding, margins, and borders. Customize the background with a color or image. Holds a single child widget, which can be a Row, Column, or even the root of an entire widget tree.  Course Material BSIT Department Container [Example]  Course Material BSIT Department GridView GridView organizes widgets into a two-dimensional list. It offers two built-in grid options, or you can design a custom grid layout. If the content exceeds the available space, GridView enables automatic scrolling. Arranges widgets in a grid layout. Automatically enables scrolling when the content exceeds the available space. Create a custom grid or use predefined options: GridView.count: Define the number of columns. GridView.extent: Set the maximum width of each tile in pixels.  Course Material BSIT Department GridView [Example]  Course Material BSIT Department ListView ListView, similar to a column, automatically enables scrolling when its content exceeds the available space in its render box. A specialized version of Column designed for arranging a list of boxes. Can be oriented either horizontally or vertically. Automatically scrolls when the content exceeds the available space. While less customizable than Column, it is simpler to use and includes built-in scrolling support.  Course Material BSIT Department ListView [Example]  Course Material BSIT Department Stack Stack allows you to layer widgets over a base widget, such as an image, with the option for widgets to either fully or partially overlap the base. Designed for layering widgets over another widget. The first child acts as the base widget, while the others are stacked on top of it. Stack content does not support scrolling. Optionally, you can clip any children that extend beyond the render box.  Course Material BSIT Department Stack [Example]  Course Material BSIT Department Material Widgets Material widgets are part of Flutter's Material library and implement Google's Material Design guidelines. They provide pre-designed components that ensure a cohesive and visually appealing user experience. Card: Groups related information into a container with rounded corners and a subtle shadow effect. ListTile: Arranges up to three lines of text along with optional leading and trailing icons in a horizontal row.  Course Material BSIT Department Card A Card, part of the Material library, is used to group related information and can include almost any widget, often paired with ListTile. While a Card has a single child, that child can be a widget like a Column, Row, List, or Grid that supports multiple children. By default, a Card starts with a size of 0 by 0 pixels, but you can use a SizedBox to set its dimensions. Implements a Material-style card for displaying related pieces of information. Accepts a single child, which can be a Row, Column, or another widget containing multiple children. Features rounded corners and a drop shadow for a polished appearance. Card content is static and does not support scrolling. Part of the Material Design library.  Course Material BSIT Department Card [Example]  Course Material BSIT Department ListTile ListTile, a row widget from the Material library, provides a simple way to create a row with up to three lines of text and optional leading and trailing icons. While commonly used within Cards or ListViews, it can also be used in other contexts. A tailored row widget that supports up to three lines of text and optional icons. Simpler to use but less customizable compared to the Row widget. Part of the Material Design library.  Course Material BSIT Department ListTile [Example]  Course Material BSIT Department Layouts Row, Column and Stack  Course Material BSIT Department Flutter Layouts Columns: Arranges child widgets vertically. Widgets are stacked on top of one another. Ideal for creating lists, forms, or vertical sections. Rows: Arranges child widgets horizontally. Widgets are placed side-by-side in a horizontal line. Commonly used for menus, toolbars, or buttons.  Course Material BSIT Department Aligning Widgets  Course Material BSIT Department Handling User Input User Interactivity  Course Material BSIT Department New Buttons and Button Themes Old Widget Old Theme New Widget New Theme FlatButton ButtonTheme TextButton TextButtonTheme RaisedButton ButtonTheme ElevatedButton ElevatedButtonTheme OutlineButton ButtonTheme OutlinedButton OutlinedButtonTheme TextButton: A flat button without elevation, ideal for less prominent actions. ElevatedButton: A raised button with a shadow for emphasis. OutlinedButton: A button with an outlined border, suitable for secondary actions. Optional: FloatingActionButton (FAB): A circular button used for primary actions in an app.  Course Material BSIT Department TextButton  Course Material BSIT Department ElevatedButton  Course Material BSIT Department OutlinedButton  Course Material BSIT Department FloatingActionButton  Course Material BSIT Department Widget based GestureDetector: Detects user gestures like taps, swipes, drags, and long presses. Allows custom behaviors for each gesture.  Course Material BSIT Department Widget based InkWell: A Material widget that adds a ripple effect for visual feedback on touch. Ideal for clickable areas in Material Design.  Course Material BSIT Department Widget Lifecycle Static and Immutable  Course Material BSIT Department Stateless Widget Stateless widgets are the simplest building blocks in Flutter. As the name suggests, they don't hold any state, meaning their appearance remains constant throughout their lifetime.  Course Material BSIT Department Example MyStatelessWidget is a Stateless Widget. The build method is overridden to return a Text widget, which is the UI for this widget. The widget will remain unchanged unless its parent rebuilds, causing the build method to be called again.  Course Material BSIT Department Stateful Widget Unlike stateless widgets, Stateful Widgets can maintain and modify their state over time. This allows for dynamic updates to the UI based on user interactions, data changes, or other events. createState(): This method is called when the widget is first inserted into the widget tree. It returns a State object, which holds the mutable state of the widget. initState(): Called immediately after createState(), it's used for initial setup, like initializing state variables or subscribing to streams. This method is called only once during the widget's lifetime. didChangeDependencies(): Called after initState() and whenever the dependencies of the widget change (e.g., InheritedWidget changes, locale changes). build(): Called to construct the widget's UI. It's called every time the state changes or the widget is rebuilt due to other reasons. didUpdateWidget(): Called when the widget configuration changes (e.g., properties passed to the widget). deactivate(): Called when the widget is removed from the tree but might be inserted again later. dispose(): Called when the widget is permanently removed from the tree and will never be inserted again. This is the final opportunity to release resources like timers, network connections, or subscriptions.  Course Material BSIT Department Example _counter is a state variable managed by the State object. The _incrementCounter method updates the state and triggers a rebuild. The build method constructs the UI based on the current state.  Course Material BSIT Department UI Behavior Styling, Theming, and Integrating User Interface Behavior  Course Material BSIT Department User Interface Behavior In Flutter, the UI is built using widgets, which are the basic building blocks of a Flutter app. Widgets describe what their view should look like given their current configuration and state. When the state of a widget changes, Flutter rebuilds the widget to reflect those changes. Key Concepts: Widgets: Immutable descriptions of part of a UI. StatefulWidget: A widget that has mutable state. StatelessWidget: A widget that does not require mutable state.  Course Material BSIT Department Handling User Interactions User interactions are a fundamental part of any app. Flutter provides various widgets and classes to handle gestures and input.  Course Material BSIT Department Implementing Animations Animations enhance user experience by providing visual feedback and making the app feel more responsive.  Course Material BSIT Department Implementing Dialogs A dialog in a Flutter app’s user interface is a temporary, often modal, overlay that appears on top of the main content to focus the user’s attention on a particular piece of information, decision, or task.  Course Material BSIT Department Building Responsive Layouts Responsive design ensures that your app looks good on all screen sizes.  Course Material BSIT Department Responsive Design Best Practices Use Flex Widgets: Flexible, Expanded, Spacer, and other flex widgets help create adaptable layouts. Avoid Hardcoding Sizes: Instead of fixed sizes, use relative sizing like percentages or fractions. Orientation Consideration: Use MediaQuery.of(context).orientation to adjust layouts for portrait and landscape modes. Breakpoints: Decide on breakpoints that make sense for your app to switch between layouts.  Course Material BSIT Department Navigator Navigation and routing are fundamental concepts in Flutter that allow users to move between different screens (or pages) of an app. Flutter provides a powerful Navigator widget and Route classes to manage the stack of routes and facilitate navigation. Basic navigation using Navigator.push and Navigator.pop Passing data between routes Using named routes Generating routes dynamically Implementing navigation with animations  Course Material BSIT Department Understanding Navigation in Flutter In Flutter, navigation is managed by a stack, where new routes are pushed onto the stack and popped off when they are no longer needed. The Navigator widget manages this stack and provides methods for navigating between routes. Navigator.push: Adds a route to the stack. Navigator.pop: Removes the current route from the stack. Routes in Flutter are simply widgets. You can define them as separate classes or functions that return a widget.  Course Material BSIT Department Creating a Basic Navigation Flow main.dart home_screen.dart  Course Material BSIT Department Creating a Basic Navigation Flow second_screen.dart Sample flow home_screen >> second_screen  Course Material BSIT Department Creating a Basic Navigation Flow home_screen.dart Receive data second_screen >> home_screen  Course Material BSIT Department Using Named Routes main.dart home_screen.dart  Course Material BSIT Department Using Named Routes second_screen.dart Sample flow home_screen >> second_screen  Course Material BSIT Department Dynamic Routes main.dart home_screen.dart  Course Material BSIT Department Dynamic Routes unknown_screen.dart second_screen.dart  Course Material BSIT Department Dynamic Routes home_screen >> second_screen.dart  Course Material BSIT Department Activity Time!  Course Material BSIT Department Q and A  Course Material BSIT Department References https://docs.flutter.dev/cookbook/forms/text-input https://docs.flutter.dev/release/breaking-changes/buttons https://docs.flutter.dev/ui/layout https://docs.flutter.dev/ui/widgets  Course Material BSIT Department Thank you!!