Flutter Basics

Flutter Introduction Session 1 slides

Transcript

1. M a nish B a nnur Flutter - SD/UI Toolkit
2. Who’s Flutter for? • For both the new or experienced developer who wants to start a mobile app with minimal overhead. • For someone looking to make an app that runs on multiple devices, either right away or in the future. • For someone who prefers to build declarative UIs with the support of a large, open- source community. • For developers with experience on one platform who want to develop an app that works across many. • For new app, Flutter is a great way to develop something quickly to validate an idea or to build a full, multi-platform production app
3. Session Overview • Section I: Build Your First Flutter App 
 - Introduce you to Flutter, kick start with Flutter development environment and walk you through building your fi rst Flutter app. 
 
 - You’ll learn about where Flutter came from and why it exists, understand the structure of Flutter projects and see how to create the UI of a Flutter app. 
 
 - You’ll also get introduced to the key component found in Flutter UI: widgets!
4. Flutter • Flutter is a software development(SD) toolkit/user interface (UI) toolkit to build apps for iOS and Android — and even the web and desktop platforms — all from a single codebase. 
 • Flutter is declarative, widget-based UI structure, that supports for rx programming, 
 cross platform abstractions and its VM that allows hot-reloading of code changes. 
 • Bene fi ts of Flutter 
 > Cross-platform - one codebase to run on multiple platforms 
 > Super-fast rendering engine - Flutter apps perform as native apps 
 > Independent of native features - Flutter’s own type of UI elements, called widgets 
 > “hot-reload” - Rarely need to rebuild your apps
5. • Flutter uses Dart as its programming language. 
 - If you know Kotlin, Swift, Java or Typescript, you’ll fi nd Dart familiar, since it’s an object-oriented C-style language. 
 • Why Dart ? 
 - You can compile Dart to native code, which makes it fast. 
 - Also uses a VM with a special feature: hot reload, by enabling to update your code and see changes instantly with redeployment. 
 • Flutter’s widgets exist parallel to native widgets due to its custom UI rendering engine, Skia. 
 - The toolkit controls how the UI looks and behaves, which allows for consistent behavior between platforms. From a performance perspective, there’s no penalty from additional layers of abstraction.
6. Flutter in brief • Flutter is open-source. • Flutter uses the Dart programming language. 
 - Dart (https://dart.dev) is a modern, UI-focused language that’s compiled to native ARM or x86 code or cross-compiled to Javascript. 
 - It supports all widely used language features, such as async/await for concurrency management and type inference for clean, type-safe code. • One best feature of Flutter is hot reload. 
 - Hot reload allows you to make updates to the code and the UI that rebuild the widget tree, then deliver them live to emulators and devices — without having to reload state or recompile your app • Sometimes, changes that a ff ect too much of the widget tree or app state to hot reload easily. In those cases, you can use hot restart. Hot restart takes a little longer than hot reload because it loads the changes, restarts the app and resets the state, but it’s still faster than a full restart, which recompiles and redeploys. You need to use a full restart when you make certain signi fi cant changes to the code, including anything changing state management.
7. Flutter • Flutter uses Material Design out of the box. The UI is fully customizable, and it comes with great animations and transitions, and you can build custom widgets as well. Because widgets are composable. • Flutter allows you to build a rich app quickly with minimal overhead and boilerplate. • Stateful widgets are bound to data and automatically update as the data model changes. • Platform integration is important for accessing libraries written in other languages or using platform-speci fi c features that don’t have a Flutter support package yet. Flutter supports C and C++ interoperability as well as platform channels for connecting to Kotlin and Java on Android and Swift or Objective-C on iOS. • https:// fl utter.dev/showcase
8. Flutter in brief • If you’ve used SwiftUI or Jetpack Compose recently, you’re already familiar with many of Flutter’s concepts. But Flutter is even better — it has fewer limitations on the tools and you can build for multiple platforms at once. • Flutter was designed with accessibility in mind, with out-of-the-box support for dynamic font sizes and screen readers and a ton of best practices around language, contrast and interaction methods. • Platform integration is important for accessing libraries written in other languages or using platform-speci fi c features that don’t have a Flutter support package yet. Flutter supports C and C++ interoperability as well as platform channels for connecting to Kotlin and Java on Android and Swift or Objective-C on iOS. • https:// fl utter.dev/showcase
9. Flutter’s history • Flutter comes from a tradition of trying to improve web performance. It’s built on top of several open-source technologies developed at Google to bring native performance and modern programming to the web through Chrome. • The Flutter team chose the Dart language, which Google also developed, for its productivity enhancements. Its object-oriented type system and support for reactive and async programming give it clear advantages over Javascript. Most importantly, Google built the Dart VM into the Chrome browser, allowing web apps written in Dart to run at native speeds. • Another piece of the puzzle is the inclusion of Skia as the graphics rendering layer. Skia is another Google-based open source project that powers the graphics on Android, Chrome browsers, Chrome OS and Firefox. It runs directly on the GPU using Vulkan on Android and Metal on iOS, making the graphics layer fast on mobile devices. Its API allows Flutter widgets to render quickly and consistently, regardless of the host platform.
10. Flutter Architecture
11. Flutter Framework • At the top is the UI theme, which uses either the Material (Android) or Cupertino (iOS) design language. This a ff ects how the controls appear, allowing you to make your app look just like a native one. • The widget layer is where you’ll spend the bulk of your UI programming time. This is where you compose design and interactive elements to make up the app. • Beneath the widgets layer is the rendering layer, which is the abstraction for building a layout. • The foundation layer provides basic building blocks, like animations and gestures, that build up the higher layers.
12. Initial Setup - https:// f lutter.dev/ • Install Flutter SDK from o ff i cial website 
 - https://docs. fl utter.dev/get-started/install / https:// fl utter.dev/docs/development/tools/sdk/releases 
 • Install Android Studio to make use of Android SDK and the build system for running Flutter apps on Android. 
 - https://developer.android.com/studio 
 Install Flutter Plugin for Android Studio 60.1.2 or later, 
 Go to Android Studio Preferences on macOS (or Settings on Windows/Linux) and choosing Plugins, then searching for “Flutter” 
 • If using MacBook, install the latest Xcode from o ffi cial website 
 - https://apps.apple.com/us/app/xcode/id497799835?mt=12 
 • Install VSCode as IDE for Flutter 
 - https://docs. fl utter.dev/get-started/editor?tab=vscode
13. Key points • Flutter is a software development toolkit from Google for building cross-platform apps using the Dart programming language. 
 • With Flutter, you can build a high-quality app that’s performant and looks great, very quickly. 
 • Flutter is for both new and experienced developers who want to start a mobile app with minimal overhead. 
 • Install the Flutter SDK and associated tools using instructions found at https:// fl utter.dev. 
 • The flutter doctor command helps you install and update your Flutter tools.
14. Widgets • There are three major types of widgets: Stateless, Stateful and Inherited. All widgets are immutable but some have state attached to them using their element. 
 
 StatelessWidget - A widget that does not require mutable state. 
 
 StatefulWidget - A widget that has mutable state. 
 
 InheritedWidget - Base class for widgets that e ffi ciently propagate information down the tree. 

15. Flutter key commands • fl utter doctor / fl utter doctor -v • fl utter help • fl utter create <project-name> • fl utter run • fl utter pub get • dart pub get 
 
 
 • fl utter.dev contains the o ffi cial documentation and reference pages, which you can fi nd at https:// fl utter.dev/docs. These will be your source for complete and up-to-date information about the SDKs