Introducción
¡Hola a todos los que quieran familiarizarse con Flutter!
Tenía un ardiente deseo de compartir con ustedes mi conocimiento que he acumulado durante varios meses.
Quizás mi experiencia es muy pequeña en comparación con los programadores gurú, aún intentaré hacer algo útil para usted.
El resultado de nuestro trabajo será una pequeña aplicación Flutter que tomará datos del JSONPlaceholder .
Nuestro plan
Parte 1 (artículo actual) - Introducción al desarrollo, primer apéndice, concepto de estado;
Parte 2: archivo pubspec.yaml y uso de flutter en la línea de comandos;
Parte 3 - BottomNavigationBar y Navigator;
Parte 4 - MVC. Usaremos este patrón en particular como uno de los más simples;
Parte 5 - paquete http. Creación de la clase Repository, primeras solicitudes, listado de publicaciones;
Parte 6 - Trabajar con imágenes, mostrar imágenes en forma de cuadrícula, recibir imágenes de la red, agregar las suyas propias a la aplicación;
Parte 7: creación de su propio tema, agregando fuentes y animaciones personalizadas;
Parte 8 - Un poco sobre las pruebas;
Primer paso: configuración e instalación de componentes
Bueno, empecemos.
Vaya a la página de instalación: Instalar - Flutter y descargue Flutter para su plataforma
Luego instale el editor o IDE usando la instrucción Configurar un editor
Usaré el IDE de Android Studio de Google.
Android Studio Flutter ( Set up an editor, ).
-
Flutter Application
( Flutter , ).
package name ( , Google Play Apple Store, , Android Application ID Apple App ID):
Finish.
-
main.dart :
import 'package:flutter/material.dart';
// main()
//
//
void main() => runApp(MyApp());
// Flutter (,, ..)
// - ,
// ( Android )
// StatelessWidget
//
class MyApp extends StatelessWidget {
// build
@override
Widget build(BuildContext context) {
// MaterialApp - ,
//
// Material Design .
return MaterialApp(
//
// ,
title: 'Json Placeholder App',
// ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
// ,
home: HomePage(),
);
}
}
( , ):
pages:
home_page.dart:
:
import 'package:flutter/material.dart';
// StatefulWidget ,
//
// setState(VoidCallback fn);
// setState
class HomePage extends StatefulWidget {
// StatefulWidget ,
// State
@override
_HomePageState createState() => _HomePageState();
}
// StatefulWidget
//
// _ ,
// _HomePageState
// private Java / Kotlin
class _HomePageState extends State<HomePage> {
// buil, ,
//
@override
Widget build(BuildContext context) {
// Scaffold ,
//
// Scaffold AppBar, BottomNavigationBar,
// Drawer, FloatingActionButton
// ().
return Scaffold(
// AppBar "Home Page"
appBar: AppBar(title: Text("Home page")),
// Scaffold
// Center ,
//
body: Center(
child: Text(
"Hello, JSON Placeholder!!!",
// Text
textAlign: TextAlign.center,
// Theme.of(context)
// ThemeData, MaterialApp
// ThemeData
// ( headline3, )
style: Theme.of(context).textTheme.headline3,
)
)
);
}
}
Flutter - ,
-
, .
HomePage main :
import 'pages/home_page.dart';
: , , :
import 'package:json_placeholder_app/pages/home_page.dart';
, pubspec.yaml (pubspec.yaml ):
, , iOS Android.
, ( , Honor 30i), Run:
!
DEBUG , :
import 'package:flutter/material.dart';
// main()
//
//
void main() => runApp(MyApp());
// Flutter (,, ..)
// - ,
// ( Android )
// StatelessWidget
//
class MyApp extends StatelessWidget {
// build
@override
Widget build(BuildContext context) {
// MaterialApp - ,
//
// Material Design .
return MaterialApp(
//
// ,
title: 'Json Placeholder App',
//
debugShowCheckedModeBanner: false,
// ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
// ,
home: HomePage(),
);
}
}
, , hot reload:
Hot Reload 2-5 , .
, .
Hot Reload build . ( )
: Hot Reload , .
: Flutter , :
, .. release Flutter .
, Hot Reload.
-
, .
:
import 'package:flutter/material.dart';
// StatefulWidget ,
//
// setState(VoidCallback fn);
// setState
class HomePage extends StatefulWidget {
// StatefulWidget ,
// State
@override
_HomePageState createState() => _HomePageState();
}
// StatefulWidget
//
// ,
// _HomePageState
// - private Java / Kotlin
class _HomePageState extends State<HomePage> {
// ,
// .. _counter
// ,
// _counter
var _counter = 0;
// build ,
//
@override
Widget build(BuildContext context) {
// Scaffold
//
// Scaffold AppBar, BottomNavigationBar,
// Drawer, FloatingActionButton
// ().
return Scaffold(
// AppBar "Home page"
appBar: AppBar(title: Text("Home page")),
// Scaffold
// Center ,
//
body: Center(
// AnimatedSwitcher,
//
child: AnimatedSwitcher(
// : const
// , Duration
//
// Duration
// (, ..)
duration: const Duration(milliseconds: 900),
// AnimatedSwitcher reverse ,
//
// , ,
// reverseDuration 0
//
reverseDuration: const Duration(milliseconds: 0),
child: Text(
//
// _counter
//
"$_counter",
//
// _counter
// setState,
// AnimatedSwitcher
// key ,
// ,
key: ValueKey<int>(_counter),
// Text
textAlign: TextAlign.center,
// Theme.of(context)
// ThemeData, MaterialApp
// ThemeData
// ( headline3, )
style: Theme.of(context).textTheme.headline3,
),
)
),
//
// FloatingActionButton -
floatingActionButton: FloatingActionButton(
//
// Flutter
child: Icon(Icons.animation),
onPressed: () {
// setState
// ,
// .
//
setState(() {
_counter++;
});
},
),
);
}
}
:
! !
.
, ))
)
!