Flutter está dotado de grandes posibilidades para una fácil personalización de la interfaz de usuario.
Hoy trataremos de cubrir las cosas más importantes que pueden serle útiles en cuanto a la creación de un diseño de aplicación.
El artículo no pretende estar completo. Contiene solo las cosas más importantes.
¡Empezar!
Nuestro plan
Parte 1 - 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 formularios, cuadros de texto y crear una publicación.
Parte 7 : trabajar con imágenes, mostrar imágenes en forma de cuadrícula, recibir imágenes de la red, agregar las suyas a la aplicación;
Parte 8 (artículo actual): creación de su propio tema, agregando fuentes y animaciones personalizadas;
Parte 9: un poco sobre las pruebas;
Agregar fuentes personalizadas
Intentemos cambiar la fuente de nuestra aplicación Flutter.
Vaya al sitio web de Google Fonts y descargue la fuente Kalam .
A continuación, creemos una carpeta fonts
en la raíz de nuestro proyecto:
Y pon nuestras fuentes ahí:
Ahora escribamos la fuente Kalam
en el pubspec.yaml
archivo:
# assets flutter: # , MaterialApp # Material Design uses-material-design: true # fonts: # - family: Kalam fonts: # # - asset: fonts/Kalam-Regular.ttf style: normal - asset: fonts/Kalam-Bold.ttf weight: 700 style: normal - asset: fonts/Kalam-Light.ttf style: normal weight: 300 # images # / , # images assets: - images/
No olvide ejecutar el pub get
comando.
Ahora podemos empezar a personalizar el tema.
Personalización del tema de la aplicación
Si tienes experiencia en el desarrollo nativo de Android, probablemente puedas entenderme.
Uno de los problemas más importantes en el desarrollo nativo es el soporte de más de 2 temas en la aplicación.
Quizás 3 o más temas, este no es un caso tan común como creo.
Pero aún así, listo para usar en Android, esto no es tan fácil de hacer. Tendrá que expandir los componentes estándar y hacer varias cosas (patrón Observer, trabajar con Drawable en el código).
Afortunadamente, Flutter no tiene esos problemas.
. resources,
theme.dart
:
import 'package:flutter/material.dart';
//
final usualTheme = ThemeData(
// primaryColor
primaryColor: Colors.purple[600],
primaryColorLight: Colors.purple[300],
primaryColorDark: Colors.purple[800],
// accentColor
accentColor: Colors.teal,
// Theme AppBar
appBarTheme: AppBarTheme(
shadowColor: Colors.grey.withOpacity(0.8),
elevation: 10,
),
// Theme Text
textTheme: TextTheme(
headline5: TextStyle(fontWeight: FontWeight.bold)
),
//
fontFamily: "Kalam"
);
primaryColor
accentColor
Material Design.
main.dart
:
class MyApp extends StatelessWidget {
// build
@override
Widget build(BuildContext context) {
// MaterialApp - ,
//
// Material Design .
return MaterialApp(
//
// ,
title: 'Json Placeholder App',
//
debugShowCheckedModeBanner: false,
//
theme: usualTheme,
//
home: HomePage(),
);
}
}
.
!
, .
:)
, Flutter UI .
:
!