![body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.network(“url1"),
Image.network(“url2"),
],
)](https://image.slidesharecdn.com/flutterfestival-handsonflutter-220227170355/85/Flutter-festival-Write-your-first-Flutter-application-17-320.jpg)
Flutter festival - Write your first Flutter application
- 1. Hands on Flutter Apoorv Pandey Organizer: Flutter Bhopal @apoorvpandey0 Create your first Flutter app Week 1
- 2. Contents What all we’ll cover today 1. Quick recap 2. Flutter app architecture 3. Fundamental widgets in Flutter 4. Code along session and QnA
- 3. • Flutter is developed by Google • It is open sourced • Flutter provides a wide range of widgets for ex. Text,Image,Card etc. • Flutter is a cross-platform application development framework. • It allows us to create applications for both Android and iOS,web, desktop using a single codebase.
- 7. Skia is a 2D rendering engine written in C++ used in Google Chrome and Mozilla Firefox. Flutter requests a window from the underlying OS and entirely manages its own content in Skia using Dart. This means that all UI logic such as scrolling, touch events and animations have to be re- implemented in Flutter.
- 8. v Everything is a widget in Flutter
- 9. Essential Widgets Let’s learn some essential widgets 1. Scaffold 2. App Bar 3. Bottom nagivation bar 4. Drawer 5. Floating action button
- 12. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Hello2"), ), body: Text("This is my first application")), ); } }
- 13. Scaffold( appBar: AppBar( title: Text("Hello2"), ), // Appbar closes body: Center( child: Text( "This is my first application", style: TextStyle(fontSize: 25), ) // Text closes ) // Center closes ) // Scaffold closes
- 14. •Text Widget properties •String •Style •Font size •Color •Background color •Letter spacing •Word spacing •Decoration •Decoration color •Decoration thickness •Softwrap •overflow What we’ll cover in this lecture: Text widget
- 15. Scaffold( appBar: AppBar( title: Text(“My pet Squirrel"), ), // Appbar closes body: Center( child: Image.network(“URL") ) // Center closes ) // Scaffold closes
- 16. Column This widget arranges its children in a vertical direction on the screen Main Axis Cross Axis
- 17. body: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Image.network(“url1"), Image.network(“url2"), ], )
- 18. Main Axis Cross Axis Row This widget arranges its children in a horizontal direction on the screen
- 20. Thank you!