Download as PDF, PPTX
Android Development using Flutter: From fundamentals to advanced
- 1. Tech Winter Break: AndroidDevelopment Using Flutter Amrita Mysore Sidharth Krishna KT
- 2. Today’s Agenda 1. Introductionto Flutter 2. Flutter Key Components 3. Introduction to Dart 4. Statless Vs Stateful Widgets 5. Implementation 6. Recap & QA
- 3.
- 4. INTRO : Whatis Flutter ? Flutter is an open-source UI framework developed by Google that allows developers to build native-quality mobile, web, and desktop applications from a single codebase..
- 5. INTRO : Whatis Flutter ? Flutter allows you to build apps for mobile, web, desktop, and embedded devices — all from a single codebase.
- 6.
- 7. Businesses of all sizesaround the world are building with Flutter Flutter apps in production
- 8.
- 10. Flutter Architecture overview •Framework: Themost visible part of the Flutter technology. It is based on the Dart programming language. •Engine: Written in C/C++, this layer provides graphics, accessibility support, text layout and other essential APIs. •Embedder: A platform specific embedder is used to help the Flutter App to run on any OS.
- 11. Introduction To Dart.. Dartis a client-optimized language for developing fast apps on any platform. Its goal is to offer the most productive programming language for multi-platform development, paired with a flexible execution runtime platform for app frameworks. Resources:- https://dart.dev/tutorials
- 12. Stateless Widget VSStateful Widget Stateless Stateful It is a Widget that is built only with configurations that started from the beginning. So Stateless Widget is a widget that will never change. It is a widget that can change dynamically. So any Widget that changes, yes, it's called Widget with status.
- 13. Stateless Widget VSStateful Widget Stateless Widgets class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('ExampleApp'), ), body: Container( child: NumberScreen(), ) ); } }
- 14. Stateless Widget VSStateful Widget Stateful Widgets class NumberScreen extends StatefulWidget { @override _NumberScreenState createState() => _NumberScreenState(); } class _NumberScreenState extends State<NumberScreen> { int number = 10; @override Widget build(BuildContext context) { return Stack( children: <Widget>[ Center( child: Text( this.number.toString(), style: TextStyle( fontSize: 30 ), ), ), Positioned( bottom: 50, right: 50, child: FloatingActionButton( child: Icon(Icons.plus_one), onPressed: () { setState(() { this.number += 1; });
- 15.
- 16. LET’s IMPLEMENT Pre-requisites • InstallFlutter --- https://docs.flutter.dev/get-started/install
- 17. Self-Study Recommendations ● https://medium.com/flutter- community/how-to-learn-flutter- 886c0bad8a46 ●https://www.freecodecamp.org/news/ how-to-develop-a-flutter-app-from- scratch/ ● https://medium.com/codex/how-i- taught-myself-flutter-and-you-can- too-9bd566d12df7
- 18. Projects To tryOut…… ❑ Calculator App ❑ To-Do App ❑ Stopwatch App ❑ Expense Tracker ❑ Quotes App
- 19.
- 20.