Sergio Alexander Florez Galeano
System engineer and passionate entrepreneur, with talent and experience building digital business. Speaker, researcher, athlete, gamer, and geek 100%.
https://rocka.co
xergioalex
Is a free open-source mobile SDK to create native Android and iOS applications from the same code base
Evolution
Alpha version (2017)
Beta version
(February 2018)
1.0 version
(December 2018)
TYPES OF MOBILE DEVELOPMENT
Native
Hybrid
Cross Platform
Flutter is a
Cross Platform
ย Cross Platform
VS
ย Cross Platform
ENGINE DE RENDERIZADO SKIA2D
ย Cross Platform
Dart is a
multi-paradigm programming language used to code Flutter apps
Mobile
YOU CAN BUILD FULL STACK APPLICATIONS WITH DART
Frontend
Angular Dart
Backend
Server applications
INSTALLATION
SDK FLUTTER
ANDROID STUDIO
VISUAL STUDIO CODE
VERIFY INSTALLATION
$ flutter doctor
FLUTTER DEMO
FLUTTER PROJECT COMPOSITION
- flutter_app/: Main folder
- android/: Custom configurations for android projects
- ios/: Custom configurations for iOS projects
- pubspec.yaml: This file store special project configurations like assets, external resources, fonts, images, plugins, etc...
- lib/: Flutter code written in Dart
Flutter is inspired by
React
Declarative
Programming
Flutter program structure (lib/)
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home(title: 'Flutter Demo Home Page'),
);
}
}
class Home extends StatefulWidget {
@override
State<MyHomePage> createState() {
return _HomeState();
}
}
Packages
Main Function
StatelessWidget
StatefulWidget
Flutter program structure (lib/)
class _HomeState extends State<HomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: ...,
body: ...,
bottomNavigationBar: ...,
floatingActionButton: ...,
floatingActionButtonLocation: ...,
);
}
}
Scaffold
State
Flutter program structure (lib/)
return Scaffold(
appBar: ...,
body: ...,
bottomNavigationBar: ...,
floatingActionButton: ...,
floatingActionButtonLocation: ...,
);
Basic Widgets
Text: https://api.flutter.dev/flutter/widgets/Text-class.html
Text(
'Hello, $_name! How are you?',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold),
)
Row: https://api.flutter.dev/flutter/widgets/Row-class.html
Row(
children: <Widget>[
Expanded(
child: Text('Deliver features faster', textAlign: TextAlign.center),
),
Expanded(
child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
),
Expanded(
child: FittedBox(
fit: BoxFit.contain, // otherwise the logo will be tiny
child: const FlutterLogo(),
),
),
],
)
Basic Widgets
Column: https://api.flutter.dev/flutter/widgets/Stack-class.html
Column(
children: <Widget>[
Text('Deliver features faster'),
Text('Craft beautiful UIs'),
Expanded(
child: FittedBox(
fit: BoxFit.contain, // otherwise the logo will be tiny
child: const FlutterLogo(),
),
),
],
)
Stack: https://api.flutter.dev/flutter/widgets/Stack-class.html
Stack(
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 90,
height: 90,
color: Colors.green,
),
],
)
Basic Widgets
Container
Center(
child: Container(
margin: const EdgeInsets.all(10.0),
color: Colors.amber[600],
width: 48.0,
height: 48.0,
),
)
Widgets Types
2 Types
StatefulWidgets: is dynamic, it can change its appearance and value in response to events triggered by user interactions.
- Sliders
- Checkbox
- Radio
- Forms
Widgets Types
2 Types
StatelessWidgets: A widget that does not require mutable state. Is a widget that describes part of the user interface.
- Icons
- Texts
- Container
- Row
- Column
Everythingโs a Widget
Layout Widget
Demo Time
Links
Documentation
Platzi Flutter Course
DartPad
Flutter Theme
https://rocka.co
xergioalex
By Sergio Alexander Florez Galeano
Just an introduction to mobile development at Android && iOS using Flutter SDK.
System engineer and passionate entrepreneur, with talent and experience building digital business. Speaker, researcher, athlete, gamer, and geek 100%.