Flutter para desarrolladores de Xamarin.Forms

Este documento está destinado a desarrolladores de Xamarin.Forms que buscan aplicar sus conocimientos existentes para crear aplicaciones móviles con Flutter. Si comprendes los fundamentos del framework de Xamarin.Forms, entonces puedes usar este documento como un punto de partida rápido para el desarrollo en Flutter.

Tus conocimientos y habilidades en Android e iOS son valiosos al compilar con Flutter, porque Flutter depende de las configuraciones del sistema operativo nativo, de manera similar a cómo configurarías tus proyectos nativos de Xamarin.Forms. El Framework de Flutter también es similar en la forma en que creas una única UI que se utiliza en múltiples plataformas.

Este documento se puede utilizar como un libro de recetas, saltando y encontrando las preguntas que sean más relevantes para tus necesidades.

Para cada plataforma en Xamarin.Forms, llamas al método LoadApplication, que crea una nueva aplicación e inicia tu app.

LoadApplication(new App());

En Flutter, el punto de entrada principal predeterminado es main donde cargas tu aplicación Flutter.

void main() {
  runApp(const MyApp());
}

En Xamarin.Forms, asignas una Page a la propiedad MainPage en la clase Application.

public class App : Application
{
    public App()
    {
        MainPage = new ContentPage
        {
            Content = new Label
            {
                Text = "Hello World",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            }
        };
    }
}

En Flutter, "todo es un widget", incluso la propia aplicación. El siguiente ejemplo muestra MyApp, un simple Widget de aplicación.

class MyApp extends StatelessWidget {
  /// This widget is the root of your application.
  const MyApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Hello World!', textDirection: TextDirection.ltr),
    );
  }
}

Xamarin.Forms tiene muchos tipos de páginas; ContentPage es la más común. En Flutter, especificas un widget de aplicación que contiene tu página raíz. Puedes usar un widget MaterialApp, que es compatible con Material Design, o puedes usar un widget CupertinoApp, que es compatible con una aplicación al estilo de iOS, o puedes usar el nivel más bajo WidgetsApp, que puedes personalizar de la manera que desees.

El siguiente código define la página de inicio, un widget stateful. En Flutter, todos los widgets son inmutables, pero se admiten dos tipos de widgets: Stateful y Stateless. Ejemplos de un widget stateless son títulos, iconos o imágenes.

El siguiente ejemplo utiliza MaterialApp, que contiene su página raíz en la propiedad home.

class MyApp extends StatelessWidget {
  /// This widget is the root of your application.
  const MyApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Desde aquí, tu primera página real es otro Widget, en el que creas tu State.

Un widget Stateful, como MyHomePage a continuación, consta de dos partes. La primera parte, que en sí misma es inmutable, crea un objeto State que contiene el State del objeto. El objeto State persiste durante la vida del widget.

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
​
  final String title;
​
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

El objeto State implementa el método build() para el widget stateful.

Cuando cambia el State del árbol de widgets, llama a setState(), lo que desencadena una compilación de esa parte de la UI. Asegúrate de llamar a setState() solo cuando sea necesario, y solo en la parte del árbol de widgets que haya cambiado, o de lo contrario puede resultar en un rendimiento deficiente de la UI.

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
​
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set the appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

En Flutter, la UI (también conocida como árbol de widgets), es inmutable, lo que significa que no puedes cambiar su State una vez que se ha construido. Cambias los campos en tu clase State, luego llamas a setState() para reconstruir todo el árbol de widgets de nuevo.

Esta forma de generar la UI es diferente a la de Xamarin.Forms, pero este enfoque tiene muchos beneficios.

ContentPage, TabbedPage, FlyoutPage son todos tipos de páginas que podrías usar en una aplicación de Xamarin.Forms. Estas páginas luego contendrían Elements para mostrar los diversos controles. En Xamarin.Forms, un Entry o un Button son ejemplos de un Element.

En Flutter, casi todo es un widget. Una Page, llamada Route en Flutter, es un widget. Los botones, las barras de progreso y los controladores de animación son todos widgets. Al construir una ruta, creas un árbol de widgets.

Flutter incluye la biblioteca Material Components. Estos son widgets que implementan las directrices de Material Design. Material Design es un sistema de diseño flexible optimizado para todas las plataformas, incluyendo iOS.

Pero Flutter es lo suficientemente flexible y expresivo para implementar cualquier lenguaje de diseño. Por ejemplo, en iOS, puedes usar los widgets de Cupertino para producir una interfaz que se parezca al lenguaje de diseño iOS de Apple.

En Xamarin.Forms, cada Page o Element es una clase stateful, que tiene propiedades y métodos. Actualizas tu Element actualizando una propiedad, y esto se propaga al control nativo.

En Flutter, los Widgets son inmutables y no puedes actualizarlos directamente cambiando una propiedad, en su lugar tienes que trabajar con el State del widget.

De aquí proviene el concepto de widgets Stateful vs Stateless. Un StatelessWidget es exactamente lo que parece: un widget sin información de State.

Los StatelessWidgets son útiles cuando la parte de la interfaz de usuario que estás describiendo no depende de nada más que de la información de configuración en el objeto.

Por ejemplo, en Xamarin.Forms, esto es similar a colocar un Image con tu logotipo. El logotipo no va a cambiar durante el tiempo de ejecución, por lo que usas un StatelessWidget en Flutter.

Si deseas cambiar dinámicamente la UI según los datos recibidos después de realizar una llamada HTTP o una interacción del usuario, entonces tienes que trabajar con StatefulWidget e indicarle al framework de Flutter que el State del widget se ha actualizado, para que pueda actualizar ese widget.

Lo importante a tener en cuenta aquí es que, en esencia, tanto los widgets stateless como los stateful se comportan igual. Se reconstruyen en cada fotograma, la diferencia es que el StatefulWidget tiene un objeto State que almacena datos de State a lo largo de los fotogramas y los restaura.

Si tienes dudas, recuerda siempre esta regla: si un widget cambia (debido a las interacciones del usuario, por ejemplo), es stateful. Sin embargo, si un widget reacciona al cambio, el widget padre contenedor aún puede ser stateless si este no reacciona al cambio por sí mismo.

El siguiente ejemplo muestra cómo usar un StatelessWidget. Un StatelessWidget común es el widget Text. Si miras la implementación del widget Text verás que es una subclase de StatelessWidget.

const Text(
  'I like Flutter!',
  style: TextStyle(fontWeight: FontWeight.bold),
);

Como puedes ver, el widget Text no tiene información de State asociada, renderiza lo que se pasa en sus constructores y nada más.

But, ¿qué pasa si quieres hacer que "I Like Flutter" cambie dinámicamente, por ejemplo, al hacer clic en un FloatingActionButton?

Para lograr esto, envuelve el widget Text en un StatefulWidget y actualízalo cuando el usuario haga clic en el botón, como se muestra en el siguiente ejemplo:

import 'package:flutter/material.dart';
​
void main() {
  runApp(const SampleApp());
}
​
class SampleApp extends StatelessWidget {
  /// This widget is the root of your application.
  const SampleApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Sample App', home: SampleAppPage());
  }
}
​
class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});
​
  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}
​
class _SampleAppPageState extends State<SampleAppPage> {
  /// Default placeholder text
  String textToShow = 'I Like Flutter';
​
  void _updateText() {
    setState(() {
      // Update the text
      textToShow = 'Flutter is Awesome!';
    });
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: Center(child: Text(textToShow)),
      floatingActionButton: FloatingActionButton(
        onPressed: _updateText,
        tooltip: 'Update Text',
        child: const Icon(Icons.update),
      ),
    );
  }
}

En Xamarin.Forms, la mayoría de los desarrolladores escriben layouts en XAML, aunque a veces en C#. En Flutter, escribes tus layouts con un árbol de widgets en el código.

El siguiente ejemplo muestra cómo mostrar un widget simple con padding:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Sample App')),
    body: Center(
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          padding: const EdgeInsets.only(left: 20, right: 30),
        ),
        onPressed: () {},
        child: const Text('Hello'),
      ),
    ),
  );
}

Puedes ver los layouts que ofrece Flutter en el catálogo de widgets.

En Xamarin.Forms, tenías que eliminar o agregar un Element en el código. Esto implicaba establecer la propiedad Content o llamar a Add() o Remove() si era una lista.

En Flutter, debido a que los widgets son inmutables, no existe un equivalente directo. En su lugar, puedes pasar una función al padre que devuelva un widget, y controlar la creación de ese hijo con una bandera booleana.

El siguiente ejemplo muestra cómo alternar entre dos widgets cuando el usuario hace clic en el FloatingActionButton:

class SampleApp extends StatelessWidget {
  /// This widget is the root of your application.
  const SampleApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Sample App', home: SampleAppPage());
  }
}
​
class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});
​
  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}
​
class _SampleAppPageState extends State<SampleAppPage> {
  /// Default value for toggle
  bool toggle = true;
  void _toggle() {
    setState(() {
      toggle = !toggle;
    });
  }
​
  Widget _getToggleChild() {
    if (toggle) {
      return const Text('Toggle One');
    }
    return CupertinoButton(onPressed: () {}, child: const Text('Toggle Two'));
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: Center(child: _getToggleChild()),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggle,
        tooltip: 'Update Text',
        child: const Icon(Icons.update),
      ),
    );
  }
}

En Xamarin.Forms, creas animaciones simples utilizando ViewExtensions que incluyen métodos como FadeTo y TranslateTo. Usarías estos métodos en una vista para realizar las animaciones requeridas.

<Image Source="{Binding MyImage}" x:Name="myImage" />

Luego, en el código subyacente (code-behind), o en un behavior, esto desvanecería la imagen en un período de 1 segundo.

myImage.FadeTo(0, 1000);

En Flutter, animas los widgets usando la biblioteca de animación al envolver los widgets dentro de un widget animado. Usa un AnimationController, que es un Animation<double> que puede pausar, buscar, detener y revertir la animación. Requiere un Ticker que indique cuándo ocurre vsync, y produce una interpolación lineal entre 0 y 1 en cada fotograma mientras se está ejecutando. Luego, creas una o más Animations y las adjuntas al controlador.

Por ejemplo, puedes usar CurvedAnimation para implementar una animación a lo largo de una curva interpolada. En este sentido, el controlador es la fuente "maestra" del progreso de la animación y la CurvedAnimation calcula la curva que reemplaza el movimiento lineal predeterminado del controlador. Al igual que los widgets, las animaciones en Flutter funcionan con composición.

Al construir el árbol de widgets, asignas la Animation a una propiedad animada de un widget, como la opacidad de un FadeTransition, e indicas al controlador que inicie la animación.

El siguiente ejemplo muestra cómo escribir una FadeTransition que desvanece el widget hacia un logotipo cuando presionas el FloatingActionButton:

import 'package:flutter/material.dart';
​
void main() {
  runApp(const FadeAppTest());
}
​
class FadeAppTest extends StatelessWidget {
  /// This widget is the root of your application.
  const FadeAppTest({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Fade Demo',
      home: MyFadeTest(title: 'Fade Demo'),
    );
  }
}
​
class MyFadeTest extends StatefulWidget {
  const MyFadeTest({super.key, required this.title});
​
  final String title;
​
  @override
  State<MyFadeTest> createState() => _MyFadeTest();
}
​
class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin {
  late final AnimationController controller;
  late final CurvedAnimation curve;
​
  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(milliseconds: 2000),
      vsync: this,
    );
    curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: FadeTransition(
          opacity: curve,
          child: const FlutterLogo(size: 100),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          controller.forward();
        },
        tooltip: 'Fade',
        child: const Icon(Icons.brush),
      ),
    );
  }
}

Para más información, consulta Widgets de animación y movimiento, el tutorial de animaciones, y la descripción general de animaciones.

Xamarin.Forms nunca tuvo una forma integrada de dibujar directamente en la pantalla. Muchos usarían SkiaSharp, si necesitaran dibujar una imagen personalizada. En Flutter, tienes acceso directo al Skia Canvas y puedes dibujar fácilmente en la pantalla.

Flutter tiene dos clases que te ayudan a dibujar en el lienzo (canvas): CustomPaint y CustomPainter, siendo esta última la que implementa tu algoritmo para dibujar en el lienzo.

Para aprender a implementar un signature painter en Flutter, consulta la respuesta de Collin sobre Custom Paint.

import 'package:flutter/material.dart';
​
void main() {
  runApp(const MaterialApp(home: DemoApp()));
}
​
class DemoApp extends StatelessWidget {
  const DemoApp({super.key});
​
  @override
  Widget build(BuildContext context) => const Scaffold(body: Signature());
}
​
class Signature extends StatefulWidget {
  const Signature({super.key});
​
  @override
  SignatureState createState() => SignatureState();
}
​
class SignatureState extends State<Signature> {
  List<Offset?> _points = <Offset?>[];
​
  void _onPanUpdate(DragUpdateDetails details) {
    setState(() {
      final RenderBox referenceBox = context.findRenderObject() as RenderBox;
      final Offset localPosition = referenceBox.globalToLocal(
        details.globalPosition,
      );
      _points = List.from(_points)..add(localPosition);
    });
  }
​
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: _onPanUpdate,
      onPanEnd: (details) => _points.add(null),
      child: CustomPaint(
        painter: SignaturePainter(_points),
        size: Size.infinite,
      ),
    );
  }
}
​
class SignaturePainter extends CustomPainter {
  const SignaturePainter(this.points);
​
  final List<Offset?> points;
​
  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = Colors.black
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 5;
    for (int i = 0; i < points.length - 1; i++) {
      if (points[i] != null && points[i + 1] != null) {
        canvas.drawLine(points[i]!, points[i + 1]!, paint);
      }
    }
  }
​
  @override
  bool shouldRepaint(SignaturePainter oldDelegate) =>
      oldDelegate.points != points;
}

En Xamarin.Forms, todos los VisualElements tienen una Opacity. En Flutter, necesitas envolver un widget en un widget Opacity para lograr esto.

En Xamarin.Forms, normalmente creas una subclase de VisualElement, o usas un VisualElement preexistente, para sobrescribir e implementar métodos que logren el comportamiento deseado.

En Flutter, construyes un widget personalizado componiendo widgets más pequeños (en lugar de extenderlos). Es algo similar a implementar un control personalizado basado en un Grid con numerosos VisualElements agregados, mientras se extiende con lógica personalizada.

Por ejemplo, ¿cómo se construye un CustomButton que recibe una etiqueta en el constructor? Crea un CustomButton que componga un ElevatedButton con una etiqueta, en lugar de extender ElevatedButton:

class CustomButton extends StatelessWidget {
  const CustomButton(this.label, {super.key});
​
  final String label;
​
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(onPressed: () {}, child: Text(label));
  }
}

Luego usa CustomButton, tal como usarías cualquier otro widget de Flutter:

@override
Widget build(BuildContext context) {
  return const Center(child: CustomButton('Hello'));
}

En Xamarin.Forms, la clase NavigationPage class proporciona una experiencia de navegación jerárquica en la que el usuario puede navegar por las páginas, hacia adelante y hacia atrás.

Flutter tiene una implementación similar, utilizando un Navigator y Routes. Una Route es una abstracción para una Page de una aplicación, y un Navigator es un widget que gestiona rutas.

Una ruta se mapea aproximadamente a una Page. El navigator funciona de manera similar a la NavigationPage de Xamarin.Forms, en el sentido de que puede realizar push() y pop() de rutas dependiendo de si deseas navegar hacia o desde una vista.

Para navegar entre páginas, tienes un par de opciones:

• Especifica un Map de nombres de rutas. (MaterialApp)
• Navegar directamente a una ruta. (WidgetsApp)

El siguiente ejemplo construye un Map.

void main() {
  runApp(
    MaterialApp(
      home: const MyAppHome(), // becomes the route named '/'
      routes: <String, WidgetBuilder>{
        '/a': (context) => const MyPage(title: 'page A'),
        '/b': (context) => const MyPage(title: 'page B'),
        '/c': (context) => const MyPage(title: 'page C'),
      },
    ),
  );
}

Navega a una ruta enviando su nombre al Navigator.

Navigator.of(context).pushNamed('/b');

El Navigator es una pila que gestiona las rutas de tu aplicación. Enviar (push) una ruta a la pila te lleva a esa ruta. Retirar (pop) una ruta de la pila te devuelve a la ruta anterior. Esto se hace esperando (awaiting) la Future devuelta por push().

async/await es muy similar a la implementación de .NET y se explica con más detalle en UI asíncrona.

Por ejemplo, para iniciar una ruta de location que permita al usuario seleccionar su ubicación, podrías hacer lo siguiente:

Object? coordinates = await Navigator.of(context).pushNamed('/location');

Y luego, dentro de tu ruta de 'location', una vez que el usuario haya seleccionado su ubicación, realiza un pop en la pila con el resultado:

Navigator.of(context).pop({'lat': 43.821757, 'long': -79.226392});

En Xamarin.Forms, para enviar al usuario a otra aplicación, utilizas un esquema de URI específico, usando Device.OpenUrl("mailto://").

Para implementar esta funcionalidad en Flutter, crea una integración de plataforma nativa, o usa un plugin existente, como url_launcher, disponible junto con muchos otros paquetes en pub.dev.

Dart tiene un modelo de ejecución monohilo, con soporte para Isolates (una forma de ejecutar códigos Dart en otro hilo), un bucle de eventos (event loop) y programación asíncrona. A menos que generes un Isolate, tu código Dart se ejecuta en el hilo principal de la UI y es impulsado por un bucle de eventos.

El modelo monohilo de Dart no significa que necesites ejecutar todo como una operación bloqueante que haga que la UI se congele. Al igual que en Xamarin.Forms, debes mantener libre el hilo de la UI. Usarías async/await para realizar tareas en las que debes esperar la respuesta.

En Flutter, usa las facilidades asíncronas que proporciona el lenguaje Dart, también llamadas async/await, para realizar trabajo asíncrono. Esto es muy similar a C# y debería ser muy fácil de usar para cualquier desarrollador de Xamarin.Forms.

Por ejemplo, puedes ejecutar código de red sin causar que la UI se cuelgue usando async/await y dejando que Dart haga el trabajo pesado:

Future<void> loadData() async {
  final Uri dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts');
  final http.Response response = await http.get(dataURL);
  setState(() {
    data = (jsonDecode(response.body) as List).cast<Map<String, Object?>>();
  });
}

Una vez completada la llamada de red esperada, update la UI llamando a setState(), lo que desencadena una reconstrucción del subárbol de widgets y actualiza los datos.

El siguiente ejemplo carga datos de forma asíncrona y los muestra en un ListView:

import 'dart:convert';
​
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
​
void main() {
  runApp(const SampleApp());
}
​
class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Sample App', home: SampleAppPage());
  }
}
​
class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});
​
  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}
​
class _SampleAppPageState extends State<SampleAppPage> {
  List<Map<String, Object?>> data = [];
​
  @override
  void initState() {
    super.initState();
    loadData();
  }
​
  Future<void> loadData() async {
    final Uri dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts');
    final http.Response response = await http.get(dataURL);
    setState(() {
      data = (jsonDecode(response.body) as List).cast<Map<String, Object?>>();
    });
  }
​
  Widget getRow(int index) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Text('Row ${data[index]['title']}'),
    );
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, index) {
          return getRow(index);
        },
      ),
    );
  }
}

Consulta la siguiente sección para obtener más información sobre cómo realizar trabajo en segundo plano y cómo difiere Flutter de Android.

Dado que Flutter es monohilo y ejecuta un bucle de eventos, no tienes que preocuparte por la gestión de hilos ni por generar hilos en segundo plano. Esto es muy similar a Xamarin.Forms. Si estás realizando trabajo ligado a I/O, como el acceso al disco o una llamada de red, entonces puedes usar con seguridad async/await y ya está.

Si, por otro lado, necesitas realizar un trabajo computacionalmente intensivo que mantenga ocupada la CPU, querrás moverlo a un Isolate para evitar bloquear el bucle de eventos (event loop), del mismo modo que mantendrías cualquier tipo de trabajo fuera del hilo principal. Esto es similar a cuando mueves cosas a un hilo diferente mediante Task.Run() en Xamarin.Forms.

Para el trabajo de entrada/salida, declara la función como una función async, y haz await en las tareas de larga duración dentro de la función:

Future<void> loadData() async {
  final Uri dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts');
  final http.Response response = await http.get(dataURL);
  setState(() {
    data = (jsonDecode(response.body) as List).cast<Map<String, Object?>>();
  });
}

Así es como normalmente realizarías llamadas de red o de base de datos, las cuales son ambas operaciones de I/O.

Sin embargo, hay ocasiones en las que podrías estar procesando una gran cantidad de datos y tu UI se congela. En Flutter, usa Isolates para aprovechar los múltiples núcleos de la CPU para realizar tareas de larga duración o computacionalmente intensivas.

Los Isolates son hilos de ejecución separados que no comparten ninguna memoria con el montón (heap) de memoria de ejecución principal. Esta es una diferencia con respecto a Task.Run(). Esto significa que no puedes acceder a variables desde el hilo principal, ni actualizar tu UI llamando a setState().

El siguiente ejemplo muestra, en un isolate simple, cómo compartir datos de vuelta al hilo principal para actualizar la UI.

Future<void> loadData() async {
  final ReceivePort receivePort = ReceivePort();
  await Isolate.spawn(dataLoader, receivePort.sendPort);
​
  // The 'echo' isolate sends its SendPort as the first message
  final SendPort sendPort = await receivePort.first as SendPort;
  final List<Map<String, dynamic>> msg = await sendReceive(
    sendPort,
    'https://jsonplaceholder.typicode.com/posts',
  );
  setState(() {
    data = msg;
  });
}
​
// The entry point for the isolate
static Future<void> dataLoader(SendPort sendPort) async {
  // Open the ReceivePort for incoming messages.
  final ReceivePort port = ReceivePort();
​
  // Notify any other isolates what port this isolate listens to.
  sendPort.send(port.sendPort);
  await for (final dynamic msg in port) {
    final String url = msg[0] as String;
    final SendPort replyTo = msg[1] as SendPort;
​
    final Uri dataURL = Uri.parse(url);
    final http.Response response = await http.get(dataURL);
    // Lots of JSON to parse
    replyTo.send(jsonDecode(response.body) as List<Map<String, dynamic>>);
  }
}
​
Future<List<Map<String, dynamic>>> sendReceive(SendPort port, String msg) {
  final ReceivePort response = ReceivePort();
  port.send(<dynamic>[msg, response.sendPort]);
  return response.first as Future<List<Map<String, dynamic>>>;
}

Aquí, dataLoader() es el Isolate que se ejecuta en su propio hilo de ejecución separado. En el isolate, puedes realizar un procesamiento más intensivo de la CPU (analizar un JSON grande, por ejemplo), o realizar operaciones matemáticas computacionalmente intensivas, como cifrado o procesamiento de señales.

Puedes ejecutar el ejemplo completo a continuación:

import 'dart:async';
import 'dart:convert';
import 'dart:isolate';
​
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
​
void main() {
  runApp(const SampleApp());
}
​
class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Sample App', home: SampleAppPage());
  }
}
​
class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});
​
  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}
​
class _SampleAppPageState extends State<SampleAppPage> {
  List<Map<String, Object?>> data = [];
​
  @override
  void initState() {
    super.initState();
    loadData();
  }
​
  bool get showLoadingDialog => data.isEmpty;
​
  Future<void> loadData() async {
    final ReceivePort receivePort = ReceivePort();
    await Isolate.spawn(dataLoader, receivePort.sendPort);
​
    // The 'echo' isolate sends its SendPort as the first message
    final SendPort sendPort = await receivePort.first as SendPort;
    final List<Map<String, dynamic>> msg = await sendReceive(
      sendPort,
      'https://jsonplaceholder.typicode.com/posts',
    );
    setState(() {
      data = msg;
    });
  }
​
  // The entry point for the isolate
  static Future<void> dataLoader(SendPort sendPort) async {
    // Open the ReceivePort for incoming messages.
    final ReceivePort port = ReceivePort();
​
    // Notify any other isolates what port this isolate listens to.
    sendPort.send(port.sendPort);
    await for (final dynamic msg in port) {
      final String url = msg[0] as String;
      final SendPort replyTo = msg[1] as SendPort;
​
      final Uri dataURL = Uri.parse(url);
      final http.Response response = await http.get(dataURL);
      // Lots of JSON to parse
      replyTo.send(jsonDecode(response.body) as List<Map<String, dynamic>>);
    }
  }
​
  Future<List<Map<String, dynamic>>> sendReceive(SendPort port, String msg) {
    final ReceivePort response = ReceivePort();
    port.send(<dynamic>[msg, response.sendPort]);
    return response.first as Future<List<Map<String, dynamic>>>;
  }
​
  Widget getBody() {
    if (showLoadingDialog) {
      return getProgressDialog();
    }
    return getListView();
  }
​
  Widget getProgressDialog() {
    return const Center(child: CircularProgressIndicator());
  }
​
  ListView getListView() {
    return ListView.builder(
      itemCount: data.length,
      itemBuilder: (context, index) {
        return getRow(index);
      },
    );
  }
​
  Widget getRow(int index) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Text('Row ${data[index]['title']}'),
    );
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: getBody(),
    );
  }
}

En Xamarin.Forms usarías HttpClient. Realizar una llamada de red en Flutter es fácil cuando utilizas el popular paquete http. Esto abstrae gran parte del trabajo de red que normalmente implementarías tú mismo, facilitando la realización de llamadas de red.

Para usar el paquete http, agrégalo a tus dependencias en pubspec.yaml:

dependencies:
  http: ^1.4.0

Para realizar una solicitud de red, llama a await en la función async http.get():

Future<void> loadData() async {
  final Uri dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts');
  final http.Response response = await http.get(dataURL);
  setState(() {
    data = (jsonDecode(response.body) as List).cast<Map<String, Object?>>();
  });
}

En Xamarin.Forms normalmente crearías un indicador de carga, ya sea directamente en XAML o a través de un plugin de terceros como AcrDialogs.

En Flutter, usa un widget ProgressIndicator. Muestra el progreso mediante programación controlando cuándo se renderiza a través de una bandera booleana. Indícale a Flutter que actualice su State antes de que comience tu tarea de larga duración, y ocúltalo después de que termine.

En el ejemplo siguiente, la función build se separa en tres funciones diferentes. Si showLoadingDialog es true (cuando widgets.length == 0), entonces renderiza el ProgressIndicator. De lo contrario, renderiza el ListView con los datos devueltos por una llamada de red.

import 'dart:async';
import 'dart:convert';
​
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
​
void main() {
  runApp(const SampleApp());
}
​
class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Sample App', home: SampleAppPage());
  }
}
​
class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});
​
  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}
​
class _SampleAppPageState extends State<SampleAppPage> {
  List<Map<String, Object?>> data = [];
​
  @override
  void initState() {
    super.initState();
    loadData();
  }
​
  bool get showLoadingDialog => data.isEmpty;
​
  Future<void> loadData() async {
    final Uri dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts');
    final http.Response response = await http.get(dataURL);
    setState(() {
      data = (jsonDecode(response.body) as List).cast<Map<String, Object?>>();
    });
  }
​
  Widget getBody() {
    if (showLoadingDialog) {
      return getProgressDialog();
    }
    return getListView();
  }
​
  Widget getProgressDialog() {
    return const Center(child: CircularProgressIndicator());
  }
​
  ListView getListView() {
    return ListView.builder(
      itemCount: data.length,
      itemBuilder: (context, index) {
        return getRow(index);
      },
    );
  }
​
  Widget getRow(int index) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Text('Row ${data[index]['title']}'),
    );
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: getBody(),
    );
  }
}

Xamarin.Forms no tiene una forma independiente de la plataforma para almacenar imágenes, tenías que colocar las imágenes en la carpeta xcasset de iOS, o en Android en las diversas carpetas drawable.

Aunque Android e iOS tratan los recursos y los assets como elementos distintos, las aplicaciones de Flutter solo tienen assets. Todos los recursos que vivirían en las carpetas Resources/drawable-* en Android, se colocan en una carpeta de assets para Flutter.

Flutter sigue un formato simple basado en la densidad al igual que iOS. Los assets pueden ser de 1.0x, 2.0x, 3.0x o cualquier otro multiplicador. Flutter no tiene dps, sino que hay píxeles lógicos, que son básicamente lo mismo que los píxeles independientes del dispositivo. El devicePixelRatio de Flutter expresa la relación de píxeles físicos en un solo píxel lógico.

El equivalente a las categorías de densidad de Android son:

Los assets se encuentran en cualquier carpeta arbitraria; Flutter no tiene una estructura de carpetas predefinida. Declaras los assets (con su ubicación) en el archivo pubspec.yaml, y Flutter los detecta.

Para agregar un nuevo asset de imagen llamado my_icon.png a nuestro proyecto Flutter, por ejemplo, y decidir que debe vivir en una carpeta que llamamos arbitrariamente images, colocarías la imagen base (1.0x) en la carpeta images, y todas las demás variantes en subcarpetas con el multiplicador de relación apropiado:

images/my_icon.png       // Base: 1.0x image
images/2.0x/my_icon.png  // 2.0x image
images/3.0x/my_icon.png  // 3.0x image

A continuación, deberás declarar estas imágenes en tu archivo pubspec.yaml:

assets:
 - images/my_icon.png

Puedes acceder directamente a tus imágenes en un widget Image.asset:

@override
Widget build(BuildContext context) {
  return Image.asset('images/my_icon.png');
}

o utilizando AssetImage:

@override
Widget build(BuildContext context) {
  return const Image(image: AssetImage('images/my_image.png'));
}

Se puede encontrar información más detallada en Agregar assets e imágenes.

A diferencia de .NET que tiene archivos resx, Flutter no tiene actualmente un sistema dedicado para manejar strings. Por el momento, la mejor práctica es declarar tus textos en una clase como campos estáticos y acceder a ellos desde allí. Por ejemplo:

class Strings {
  static const String welcomeMessage = 'Welcome To Flutter';
}

Puedes acceder a tus strings de esta manera:

Text(Strings.welcomeMessage);

Por defecto, Flutter solo admite inglés de EE. UU. para sus strings. Si necesitas agregar soporte para otros idiomas, incluye el paquete flutter_localizations. También es posible que necesites agregar el paquete intl de Dart para usar el mecanismo de localización (i18n), como el formato de fecha/hora.

dependencies:
  flutter_localizations:
    sdk: flutter
  intl: any # Use version of intl from flutter_localizations.

Para usar el paquete flutter_localizations, especifica los localizationsDelegates y supportedLocales en el widget de la aplicación:

import 'package:flutter_localizations/flutter_localizations.dart';
​
class MyWidget extends StatelessWidget {
  const MyWidget({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      localizationsDelegates: <LocalizationsDelegate<dynamic>>[
        // Add app-specific localization delegate[s] here
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: <Locale>[
        Locale('en', 'US'), // English
        Locale('he', 'IL'), // Hebrew
        // ... other locales the app supports
      ],
    );
  }
}

Los delegados contienen los valores localizados reales, mientras que supportedLocales define qué configuraciones regionales (locales) admite la aplicación. El ejemplo anterior utiliza un MaterialApp, por lo que tiene tanto un GlobalWidgetsLocalizations para los valores localizados de los widgets base, como un MaterialWidgetsLocalizations para las localizaciones de los widgets de Material. Si utilizas WidgetsApp para tu aplicación, no necesitas este último. Ten en cuenta que estos dos delegados contienen valores "predeterminados", pero deberás proporcionar uno o más delegados para los textos localizables de tu propia aplicación, si deseas que también se localicen.

Cuando se inicializa, WidgetsApp (o MaterialApp) crea un widget Localizations para ti, con los delegados que especifiques. La configuración regional (locale) actual del dispositivo siempre es accesible desde el widget Localizations desde el contexto actual (en forma de un objeto Locale), o utilizando Window.locale.

Para acceder a los recursos localizados, usa el método Localizations.of() para acceder a una clase de localización específica que proporciona un delegado determinado. Usa el paquete intl_translation para extraer los textos traducibles a archivos arb para su traducción, e impórtalos de vuelta a la aplicación para usarlos con intl.

Para obtener más detalles sobre la internacionalización y localización en Flutter, consulta la guía de internacionalización, que tiene código de ejemplo con y sin el paquete intl.

En Xamarin.Forms tendrás un archivo csproj. El equivalente más cercano en Flutter es pubspec.yaml, que contiene las dependencias de paquetes y varios detalles del proyecto. Similar a .NET Standard, los archivos dentro del mismo directorio se consideran parte del proyecto.

En el ecosistema .NET, los proyectos nativos de Xamarin y los proyectos de Xamarin.Forms tenían acceso a NuGet y al sistema de gestión de paquetes integrado. Las aplicaciones de Flutter contienen una aplicación nativa de Android, una aplicación nativa de iOS y la aplicación Flutter.

En Android, agregas dependencias añadiéndolas a tu script de compilación de Gradle. En iOS, agregas dependencias añadiéndolas a tu Podfile.

Flutter utiliza el propio sistema de compilación de Dart y el gestor de paquetes Pub. Las herramientas delegan la compilación de las aplicaciones contenedor de Android e iOS nativas a los respectivos sistemas de compilación.

En general, utiliza pubspec.yaml para declarar dependencias externas para usar en Flutter. Un buen lugar para encontrar paquetes de Flutter es en pub.dev.

En Xamarin.Forms, tienes una Application que contiene OnStart, OnResume y OnSleep. En Flutter, en su lugar puedes escuchar eventos de ciclo de vida similares vinculándote al observador WidgetsBinding y escuchando el evento de cambio didChangeAppLifecycleState().

Los eventos del ciclo de vida observables son:

inactive

La aplicación está en un estado inactivo y no está recibiendo entrada del usuario. Este evento es solo para iOS.

paused

La aplicación no está visible actualmente para el usuario, no responde a la entrada del usuario, pero se está ejecutando en segundo plano.

resumed

La aplicación está visible y responde a la entrada del usuario.

suspending

La aplicación se suspende momentáneamente. Este evento es solo para Android.

Para obtener más detalles sobre el significado de estos estados, consulta la documentación de AppLifecycleStatus.

En Xamarin.Forms puedes crear un StackLayout con una Orientation horizontal o vertical. Flutter tiene un enfoque similar, sin embargo, usarías los widgets Row o Column.

Si te fijas, los dos ejemplos de código son idénticos excepto por el widget Row y Column. Los hijos son los mismos y esta característica se puede aprovechar para desarrollar layouts ricos que pueden cambiar con el tiempo con los mismos hijos.

@override
Widget build(BuildContext context) {
  return const Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('Row One'),
      Text('Row Two'),
      Text('Row Three'),
      Text('Row Four'),
    ],
  );
}

@override
Widget build(BuildContext context) {
  return const Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('Column One'),
      Text('Column Two'),
      Text('Column Three'),
      Text('Column Four'),
    ],
  );

El equivalente más cercano a un Grid sería un GridView. Esto es mucho más potente de lo que estás acostumbrado en Xamarin.Forms. Un GridView proporciona desplazamiento automático cuando el contenido excede su espacio visible.

@override
Widget build(BuildContext context) {
  return GridView.count(
    // Create a grid with 2 columns. If you change the scrollDirection to
    // horizontal, this would produce 2 rows.
    crossAxisCount: 2,
    // Generate 100 widgets that display their index in the list.
    children: List<Widget>.generate(100, (index) {
      return Center(
        child: Text(
          'Item $index',
          style: Theme.of(context).textTheme.headlineMedium,
        ),
      );
    }),
  );
}

Es posible que hayas utilizado un Grid en Xamarin.Forms para implementar widgets que se superponen a otros widgets. En Flutter, logras esto con el widget Stack.

Este ejemplo crea dos iconos que se superponen entre sí.

@override
Widget build(BuildContext context) {
  return const Stack(
    children: <Widget>[
      Icon(Icons.add_box, size: 24, color: Colors.black),
      Positioned(
        left: 10,
        child: Icon(Icons.add_circle, size: 24, color: Colors.black),
      ),
    ],
  );
}

En Xamarin.Forms, un ScrollView envuelve un VisualElement, y si el contenido es más grande que la pantalla del dispositivo, se desplaza.

En Flutter, la coincidencia más cercana es el widget SingleChildScrollView. Simplemente llenas el Widget con el contenido que deseas que sea desplazable.

@override
Widget build(BuildContext context) {
  return const SingleChildScrollView(child: Text('Long Content'));
}

Si tienes muchos elementos que deseas envolver en un scroll, incluso de diferentes tipos de Widget, es posible que desees usar un ListView. Esto podría parecer exagerado, pero en Flutter está mucho más optimizado y es menos intensivo que un ListView de Xamarin.Forms, que se basa en controles específicos de la plataforma.

@override
Widget build(BuildContext context) {
  return ListView(
    children: const <Widget>[
      Text('Row One'),
      Text('Row Two'),
      Text('Row Three'),
      Text('Row Four'),
    ],
  );
}

Las transiciones a modo horizontal (landscape) se pueden manejar automáticamente configurando la propiedad configChanges en el AndroidManifest.xml:

<activity android:configChanges="orientation|screenSize" />

En Xamarin.Forms, los Elements pueden contener un evento de clic al que te puedes vincular. Muchos elementos también contienen un Command que está asociado a este evento. Alternativamente, usarías el TapGestureRecognizer. En Flutter hay dos formas muy similares:

1. Si el widget admite la detección de eventos, pásale una función y manéjala en la función. Por ejemplo, el ElevatedButton tiene un parámetro onPressed:

   dart

   @override
   Widget build(BuildContext context) {
     return ElevatedButton(
       onPressed: () {
         developer.log('click');
       },
       child: const Text('Button'),
     );
   }
   

   content_copy

2. Si el widget no admite la detección de eventos, envuelve el widget en un GestureDetector y pasa una función al parámetro onTap.

   dart

   class SampleApp extends StatelessWidget {
     const SampleApp({super.key});
   ​
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Center(
           child: GestureDetector(
             onTap: () {
               developer.log('tap');
             },
             child: const FlutterLogo(size: 200),
           ),
         ),
       );
     }
   }
   

   content_copy