Cómo hacer tu primera aplicación de Linux con Flutter

Muchas aplicaciones populares, como Adobe Photoshop, Microsoft Office y WhatsApp, no tienen equivalentes de escritorio de Linux. Sin embargo, gracias a las plataformas de desarrollo de aplicaciones multiplataforma como Electrón, Aleteo y Tauriel número de aplicaciones de Linux va en aumento.

Si está interesado en probar suerte en el desarrollo, este tutorial le muestra cómo crear una aplicación muy simple usando Flutter y podría resultar útil para aquellos que desean descubrir cómo crear aplicaciones para Linux y obtener algo de experiencia en programación.

Por qué Linux necesita más aplicaciones

Linux tiene una base de usuarios de escritorio más pequeña en comparación con Windows y Mac, que es una de las razones por las que los desarrolladores de aplicaciones son reacios a publicar sus aplicaciones en Linux. Desafortunadamente, la escasez de aplicaciones populares compatibles con Linux afecta la adopción por parte de la población en general, creando así un círculo vicioso. No ayuda que Linux a menudo se considere una alternativa para las personas más conocedoras de la tecnología.

flutter linux 1
Fuente de la imagen: Figma

Para cambiar esta narrativa, la comunidad Linux necesita enfocarse en portar más aplicaciones enfocadas en utilidades a su ecosistema. Con una base de usuarios cada vez mayor, los principales desarrolladores finalmente se animarán a lanzar sus aplicaciones en Linux. Si desea ser parte de este esfuerzo, Flutter es una excelente manera de comenzar su viaje de desarrollo de aplicaciones de Linux.

¿Qué es Flutter?

Flutter es un marco de desarrollo de aplicaciones multiplataforma de Google que utiliza Dart, un lenguaje de programación orientado a objetos. La mayor ventaja de Flutter es que permite a los desarrolladores crear aplicaciones compiladas de forma nativa para dispositivos móviles, web y de escritorio desde una única base de código.

Flutter Linux 2
Fuente de la imagen: Figma

Actualmente, Flutter es compatible con todas las plataformas de escritorio, incluidas Windows, Mac y Linux, así como con Android e iOS en dispositivos móviles. Flutter no usa elementos de interfaz de usuario específicos de la plataforma y, en su lugar, implementa un lienzo en blanco con widgets agregados. Por lo tanto, Flutter se denomina marco declarativo.

¿Por qué elegir Flutter para el desarrollo de tu aplicación Linux?

Flutter es muy rápido en comparación con alternativas como Electron. Este último utiliza tecnologías web para crear aplicaciones de escritorio e incluye un motor Chromium para obtener un rendimiento constante en todas las plataformas de escritorio. Por lo tanto, las aplicaciones desarrolladas en la plataforma son muy pesadas y consumen más RAM.

Flutter adopta un enfoque diferente, compilando el código fuente de Dart en paquetes C/C++ específicos de la plataforma. Las aplicaciones resultantes son considerablemente más livianas que las aplicaciones de Electron, lo que significa que también tienen más rendimiento y consumen menos recursos.

Flutter viene con soporte para los últimos widgets de estilo Gnome Libadwaita y permite a los desarrolladores personalizar sus aplicaciones usando el tema Yaru de Ubuntu. Además, Canonical ha publicado varios paquetes fáciles de usar para ayudar a los usuarios a crear aplicaciones de Linux de manera eficiente y sin profundizar demasiado en las API del sistema de Linux.

Flutter Linux 3

1. Instalar Flutter en tu máquina

A continuación se describen tres formas de instalar Flutter en su escritorio Linux.

Instalar Flutter usando Snap

Antes de instalar Flutter a través de Snap, debe tener Snap instalado en su computadora. Snap es parte de las distribuciones de Ubuntu, pero también puede instalarlo fácilmente en otros entornos de escritorio.

Si está utilizando una distribución basada en Debian, primero instale «snapd» usando su administrador de paquetes.

sudo apt update
sudo apt install snapd

Reinicie su dispositivo para asegurarse de que todas las rutas de Snaps estén configuradas correctamente. Para obtener la última versión de «snapd», instale el paquete principal de Snap.

Para las distribuciones de Linux basadas en Fedora o Red Hat, puede usar el administrador de paquetes DNF para instalar «snapd».

Flutter es un Snap clásico, por lo que se comporta como un sistema instalado tradicionalmente. Tiene acceso completo a su sistema a diferencia de los Snaps normales, que están confinados a un entorno de espacio aislado. Para habilitar Snap clásico en Fedora, ejecute el siguiente comando.

sudo ln -s /var/lib/snapd/snap /snap

Una vez que Snap esté integrado en su computadora, instale Flutter con Snap.

sudo snap install flutter --classic

ejecutar el flutter doctor -v Comando para ver si todo está configurado en su dispositivo. Si ese no es el caso, Flutter CLI (interfaz de línea de comandos) le brinda las instrucciones adecuadas para configurar todos los componentes necesarios para desarrollar aplicaciones de Linux en su dispositivo.

Build Linux App Flutter instalado

Instalar Flutter manualmente

Si no desea utilizar Snap, puede descargar el última versión estable de Flutter desde el sitio web oficial e instalarlo manualmente desde allí. Como alternativa, ejecute el wget Comando para descargar Flutter directamente sin salir de tu Terminal.

Deberá sustituir la versión 3.3.2 con la última versión estable de Flutter usando este comando:

wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.3.2-stable.tar.xz

Luego extraiga los archivos en el directorio actual.

tar xf ~/Downloads/flutter_linux_3.3.2-stable.tar.xz

Copie el directorio de Flutter extraído en su carpeta de inicio y configure la ruta binaria de Flutter en su entorno bash.

cp flutter/ ~ 
export PATH="$PATH:`pwd`/flutter/bin"

ejecutar el flutter doctor -v Comando para ver si Flutter se instaló correctamente. Si desea configurar las variables de entorno de Flutter de forma permanente y hacer que los comandos de Flutter sean accesibles en su entorno, configure la variable de entorno de Flutter en su archivo «.rc».

Si está utilizando el shell bash, abra su archivo «.bashrc» y pegue la siguiente línea de código al final.

export PATH="$PATH:[PATH_OF_FLUTTER_DIRECTORY]/bin"

Nota: cambiar el [PATH_OF_FLUTTER_DIRECTORY] a su propia ruta de directorio de Flutter.

Presione guardar y obtenga su archivo «.bashrc» o use una nueva ventana de Terminal para actualizar sus variables de entorno presentes en el archivo «.bashrc».

Finalmente, ejecute el flutter doctor -v comando nuevamente para ver si todos los componentes de Flutter están correctamente instalados en su dispositivo. Alternativamente, siga las salidas de la Terminal para instalar todas las bibliotecas de Flutter requeridas.

Instalar usando Git

Instalar Flutter usando Git es similar a los procesos anteriores. La principal diferencia es que, en lugar de descargar una versión particular de Flutter, puede cambiar la versión de Flutter simplemente agregando un argumento de Terminal.

Es posible instalar Git usando su administrador de paquetes.

sudo apt update
sudo apt install git

Clone el repositorio de GitHub en el directorio de trabajo actual. Debe usar su directorio de inicio en lugar de un directorio aleatorio.

cd ~
git clone https://github.com/flutter/flutter.git

El comando anterior clonó la rama maestra del repositorio de GitHub. Si desea cambiarlo a la rama estable, agregue un -b marca al comando git clon.

git clone https://github.com/flutter/flutter.git -b stable

Agregue la ruta de Flutter a su archivo «.bashrc» para finalizar la instalación de Flutter.

export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin"

2. Generando un Proyecto Flutter

Si acaba de empezar a trabajar en el proyecto y aún no ha escrito mucho código, crear un proyecto con un nuevo nombre de paquete (identificador único) es la solución más limpia. Cada aplicación de Flutter tiene un nombre de paquete que identifica de manera única su aplicación y puede configurarlo usando el flutter create dominio.

Si tiene un nombre de dominio llamado «example.com», entonces el nombre de su paquete debe ser «com.example nombre del proyecto“. Puede establecer este nombre de paquete usando un --org bandera en el flutter create dominio.

flutter create --org com.example counter

Esto creará un nuevo proyecto de Flutter en el directorio actual donde el nombre del proyecto es «contador» y el nombre del paquete es «com.example.counter».

Flutter Crear

Cuando crea una aplicación Flutter, el archivo «main.dart» que se encuentra en la carpeta «counter/lib» de su proyecto se completará con una aplicación de demostración (su código se puede modificar, como se muestra a continuación), ¡que puede ejecutar de inmediato!

3. Ejecutar tu primera aplicación Flutter

Después de generar su proyecto Flutter, abra el directorio del proyecto en su editor de código favorito. Por ejemplo, si está utilizando Visual Studio Code, ejecute code counter en la Terminal para abrir el directorio de su proyecto («contador» en nuestro caso) en VSCode.

Utilizar el CONTROL + ` comando para abrir una Terminal dentro del editor, que usará para ejecutar su primera aplicación Flutter escribiendo:

carrera de aleteo

Si ha hecho todo correctamente, debería estar ejecutando su aplicación Linux en su escritorio. Es una aplicación simple que le permite presionar un «+» (Agregar) para aumentar el contador ubicado en el centro.

Aplicación Flutter 1

Conceptos básicos de las aplicaciones de Flutter

Antes de comenzar a editar partes de este código de demostración, deberá comprender algunos conceptos que son exclusivos de Flutter. Abra el archivo “counter/lib/main.dart” en su editor de código para observar un par de aspectos:

void main() 
  runApp(const MyApp());
  • principal() – esta es una función que representa el punto de partida de la aplicación.
  • MiAplicación() – este es un widget de Flutter. Piense en los widgets como bloques de construcción básicos de Flutter. Vienen en dos sabores: sin estado y con estado.

1. Widgets sin estado en Flutter

Los widgets sin estado son widgets básicos que contienen otros widgets y no se pueden modificar una vez creados. Como sugiere el nombre, los widgets sin estado no tienen ningún estado por sí mismos. MyApp() es un ejemplo de un widget sin estado. Contiene el widget MaterialApp() pero no tiene ninguna reactividad, ya que es visible en el propio código:

class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);
 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  

2. Widgets con estado en Flutter

Por el contrario, los widgets con estado se pueden modificar una vez que se crean. En la aplicación de demostración, ha visto un cambio de valor de «contador» cuando presionamos el botón. Esto se logra mediante el uso de widgets Stateful, como se ve en el código donde:

  • MyHomePage es un widget con estado.
  • En el interior _MyHomePageState clase, observe la variable nombrada _counterque inicialmente se establece en 0.
  • Al hacer clic en el botón en la demostración, la _incrementCounter() función para ejecutar y aumentar el valor en 1.
  • los setState() función dentro _incrementCounter() vuelve a renderizar el MyHomePage widget y un actualizado _counter el valor se muestra en la pantalla.
class MyHomePage extends StatefulWidget 
  const MyHomePage(Key? key, required this.title) : super(key: key);
 
  final String title;
 
  @override
  State<MyHomePage> createState() => _MyHomePageState();

 
class _MyHomePageState extends State<MyHomePage> 
  int _counter = 0;
 
  void _incrementCounter() 
    setState(() 
      _counter++;
    );
  
 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  

Personalización de su aplicación

Dentro del widget MyApp, puede, por ejemplo, cambiar la cadena de título de «Página de inicio de demostración de Flutter» a «Facilitar la tecnología»:

home: const MyHomePage(title: 'TecnoTec'),

También puede cambiar el tema de la aplicación usando el primarySwatch propiedad del widget MaterialApp. Por defecto, obtienes un tema de color azul. Para cambiar este color a verde, simplemente reemplace «Colors.blue» a «Colors.green»:

primarySwatch: Colors.green,

Para ver los cambios, ve a tu Terminal y presiona r en su teclado para recargar en caliente la aplicación. Puede ver instantáneamente que el color y el título de la aplicación han cambiado.

Aplicación Flutter 3

Este es un tutorial muy básico para darle una idea de cómo funciona Flutter y cómo puede comenzar con el desarrollo de aplicaciones de Linux usándolo. Si estás interesado y quieres saber más, sigue este guía de inicio del sitio web de Flutter.

Preguntas frecuentes

¿Se pueden crear sitios web con Flutter?

Sí. Flutter también es compatible con el desarrollo web. Puede escribir el código e implementar su aplicación en plataformas móviles, de escritorio y web. Después de crear su aplicación web, puede enviar su aplicación web a las páginas de Cloudflare u otras plataformas de alojamiento de sitios estáticos.

¿Puedes ejecutar comandos de shell en Flutter?

Ejecutar comandos de shell es crucial si está desarrollando para Linux. Flutter ofrece esta funcionalidad lista para usar usando dartIO. Si es un principiante de Linux, póngase al día con los conceptos básicos de las secuencias de comandos de shell en Linux consultando nuestro artículo dedicado al tema.

¿Cómo puedo implementar mis aplicaciones Flutter Linux?

La forma oficial de implementar la aplicación Flutter Linux es mediante el uso de paquetes Snap. Alternativamente, puede libéralas en la Snap Store. Pero a medida que Flutter crea binarios vinculados estáticamente, puede empaquetarlos utilizando Appimage, Flatpak o formatos de empaquetado nativos como «.deb» o «.rpm».

Crédito de la imagen: Carl Heyerdahl vía Unsplash. Todas las capturas de pantalla por Hrishikesh Pathak

¿Es útil este artículo?

¡Suscríbete a nuestro boletín!

Nuestros últimos tutoriales enviados directamente a su bandeja de entrada

¡Compártelo en tus redes!

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Ver más

  • Responsable: David Martínez.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a Banahosting que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.