5 Consejos Para Tu Próximo Proyecto con Flutter

5 minuto(s)

Hasta la fecha de este Post Flutter está siendo adoptado por empresas y desarrolladores de aplicaciones, ya que su característica multiplataforma le da un gran potencial. La mayoría de las actualizaciones de Flutter incluyen compatibilidades de plataforma mejoradas que contribuyen a su crecimiento. Si estás comenzando o tienes en mente crear un nuevo proyecto con Flutter, en este Post te compartiré 5 Consejos Para Tu Próximo Proyecto con Flutter, vamos con ello.

Antes de continuar, te invito a escuchar el Podcast: “Como Mantenerte Motivado Para Seguir Programando” y “¿ Porqué Es Importante Saber Programar en la Ciberseguridad ?” (Anchor Podcast):

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Los 20 Lenguajes de Programación más Populares – Julio 2022.

Crea Aplicaciones Que Dependan De Menos Paquetes

En lo posile, no confies demasiado en los paquetes, ya que pueden desaprobar ciertas funciones, lo que te dará trabajo adicional para crear una solución.

Aunque depende de la complejidad de la función que quieres realizar, se pueden evitar ciertos paquetes, como agregar animación a los contenedores, ya que esto puede ser algo que se puede codificar desde cero. Esto te permitirá tener más control sobre el widget y hacerle cambios fácilmente.

Actualiza regularmente el archivo pubspec.yaml, elimina los paquetes que se agregaron anteriormente pero que ya no se usan en el proyecto.

Personaliza Los Widgets Repetitivos

Los widgets que se repiten en el proyecto, se pueden extraer en un widget separado y usarse en varios lugares. Esto evita volver a escribir el mismo widget y ahorra tiempo y esfuerzo.

Tomemo como ejemplo una pantalla con 4 botones. En lugar de escribir el código del botón con onPressed(), el color y otras propiedades 4 veces, mejor es extraer el botón en un widget separado y luego pasarle esas propiedades y variables.


 Column(
   mainAxisAlignment: MainAxisAlignment.spaceAround,
   children: [
     Text(
       "Distinto tonos de Púrpura en Flutter",
       style: TextStyle(fontSize: 22),
     ),
     CommonButton(
       onPress: () => log("Se hizo clic en el botón Morado Claro"),
       color: Colors.purple[200] !,
       text: 'Morado Claro',
     ),
     CommonButton(
       onPress: () => log("Se hizo clic en el botón morado"),
       color: Colors.purple,
       text: 'Morado',
     ),
     CommonButton(
       onPress: () => log("Se hizo clic en el botón Acento Púrpura"),
       color: Colors.purpleAccent,
       text: 'Acento Púrpura',
     ),
     CommonButton(
       onPress: () => log("Se hizo clic en el botón Deep Purple"),
       color: Colors.deepPurple,
       text: 'Deep Purple',
     )
   ],
 ),

Column(

mainAxisAlignment: MainAxisAlignment.spaceAround,

children: [

Text(

"Distinto tonos de Púrpura en Flutter",

style: TextStyle(fontSize: 22),

CommonButton(

onPress: () => log("Se hizo clic en el botón Morado Claro"),

color: Colors.purple[200] !,

text: 'Morado Claro',

CommonButton(

onPress: () => log("Se hizo clic en el botón morado"),

color: Colors.purple,

text: 'Morado',

CommonButton(

onPress: () => log("Se hizo clic en el botón Acento Púrpura"),

color: Colors.purpleAccent,

text: 'Acento Púrpura',

CommonButton(

onPress: () => log("Se hizo clic en el botón Deep Purple"),

color: Colors.deepPurple,

text: 'Deep Purple',

)

En el código anterior, el widget CommonButton se llama 4 veces y cada vez que se llama a onPress() se pasan las propiedades color y tex. Veamos ahora el código del widget CommonButton de manera independiente:


class CommonButton extends StatelessWidget {
  const CommonButton({
    required this.text,
    required this.color,
    required this.onPress,
    Key ? key
  }): super(key: key);
  final String text;
  final Color color;
  final VoidCallback onPress;
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Text(text),
      onPressed: onPress,
      style: ElevatedButton.styleFrom(
        primary: color,
        padding: EdgeInsets.symmetric(horizontal: 50, vertical: 15),
        textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
    );
  }
}

class CommonButton extends StatelessWidget {

const CommonButton({

required this.text,

required this.color,

required this.onPress,

Key ? key

}): super(key: key);

final String text;

final Color color;

final VoidCallback onPress;

@override

Widget build(BuildContext context) {

return ElevatedButton(

child: Text(text),

onPressed: onPress,

style: ElevatedButton.styleFrom(

primary: color,

padding: EdgeInsets.symmetric(horizontal: 50, vertical: 15),

textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),

);

}

Las variables serán diferentes cada vez que se llame a CommonButton, y así es como podemos reutilizar el widget CommonButton varias veces en el proyecto.

Usa log() en vez de print()

Flutter 2.5 y versiones posteriores vienen con el el paquete fluter lints, un paquete que identifica posibles problemas en el código fluente de tu código Dart.

Cada vez que usas print(), muestra una advertencia que dice “Avoid ‘print’ calls in production code” (“Evite las llamadas ‘print’ en el código de producción”). El paquete lo marca como una advertencia porque los registros de impresión en las compilaciones de lanzamiento pueden registrar información confidencial. Para evitar esto usa la función log() que viene integrada con Dart, esta función te ayuda a encontrar errores en el código, asimismo verifica problemas de rendimiento, estilos de codificación y formato.

Usa Widget de SizedBox Sin Widget

Utiliza SizedBox con altura 0 para ocultar un widget. En el siguiente código solo mostramos el widget de texto cuando la propiedad showButton es true; de lo contrario, SizedBox dibujará un widget con altura 0; en resumen, no se mostrará nada en la interfaz de usuario si showButton es false.


showButton
  ?
  Text(
    "Texto morado claro",
    style: f14blackLetterSpacing2,
  ) :
  height0,

showButton

Text(

"Texto morado claro",

style: f14blackLetterSpacing2,

) :

height0,

Otro enfoque para mostrar/ocultar widgets, es usando el widget Visibility(). El siguiente widget de texto solo se mostrará si el indice (index) es 0 (visible es true); de lo contrario, el widget de texto se vuelve invisible (visible es false).


 Visibility(
   visible: index == 0,
   child: Text(
     "Diferentes tonos de Púrpura en Flutter",
     style: TextStyle(fontSize: 22),
   ),
 ),

Visibility(

visible: index == 0,

child: Text(

"Diferentes tonos de Púrpura en Flutter",

style: TextStyle(fontSize: 22),

Usa Un Archivo Común Para Constantes

Un archivo común para colocar todas las constantes, como colores, strings de activos, decoraciones, estilos de texto, etc., puede facilitar todo el proceso de diseño.

Veamos el siguiente ejemplo de un archivo de constantes:


<pre class="lang:c# decode:true ">import 'package:flutter/material.dart';

Color colorTexto = Color(0xFF222939);

const alto19 = SizedBox(
  height: 19,
);

String logo = 'assets/images/logo.png';

TextStyle f14blackLetterSpacing2 = TextStyle(
  fontSize: 14, fontFamily: 'Poppins', color: colorTexto, letterSpacing: 2);

TextStyle f20gris =
  TextStyle(color: Colors.white, fontFamily: 'Poppins', fontSize: 16);

TextStyle f34grisbold = TextStyle(
  fontSize: 24,
  fontFamily: 'Poppins',
  color: Colors.white,
  fontWeight: FontWeight.bold);

BoxDecoration f42Rgrisbold = BoxDecoration(
  borderRadius: BorderRadius.circular(8), color: colorTexto);</pre>

<pre class="lang:c# decode:true ">import 'package:flutter/material.dart';

Color colorTexto = Color(0xFF222939);

const alto19 = SizedBox(

height: 19,

);

String logo = 'assets/images/logo.png';

TextStyle f14blackLetterSpacing2 = TextStyle(

fontSize: 14, fontFamily: 'Poppins', color: colorTexto, letterSpacing: 2);

TextStyle f20gris =

TextStyle(color: Colors.white, fontFamily: 'Poppins', fontSize: 16);

TextStyle f34grisbold = TextStyle(

fontSize: 24,

fontFamily: 'Poppins',

color: Colors.white,

fontWeight: FontWeight.bold);

BoxDecoration f42Rgrisbold = BoxDecoration(

borderRadius: BorderRadius.circular(8), color: colorTexto);</pre>

Ahora, a lo largo del proyecto, no necesitas definir una constante cada vez. Definelo una sola vez en el archivo constants.dart y utilizalo en varios lugares. Puedes reutilizar el archivo de constantes para varios proyectos.

Conclusión

Existen otras prácticas que puedes crear por tu cuenta, conforme vas desarrollando varios proyectos con Flutter, irás dandote cuenta cuales prácticas usar para lograr crear un proyecto de manera optima.

Nota(s)

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

Flutter
19-08-2022
19-08-2022
Crear un Post - Eventos Devs - Foro

5 Consejos Para Tu Próximo Proyecto con Flutter

Crea Aplicaciones Que Dependan De Menos Paquetes

Personaliza Los Widgets Repetitivos

Usa log() en vez de print()

Usa Widget de SizedBox Sin Widget

Usa Un Archivo Común Para Constantes

Conclusión

Nota(s)

Todas Nuestras Páginas y Categorías:

Partners