dart - plugin - ¿Cuál es la diferencia entre funciones y clases para crear widgets?

widget plugin

Question

Me he dado cuenta de que es posible crear widgets utilizando funciones simples en lugar de subclasificar StatelessWidget . Un ejemplo sería este:

Widget function({ String title, VoidCallback callback }) {
return GestureDetector(
onTap: callback,
child: // some widget
);
}

Esto es interesante porque requiere mucho menos código que una clase completa. Ejemplo:

class SomeWidget extends StatelessWidget {
final VoidCallback callback;
final String title;
const SomeWidget({Key key, this.callback, this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: callback,
child: // some widget
);
}
}

Así que me he estado preguntando: ¿hay alguna diferencia además de la sintaxis entre las funciones y las clases para crear widgets? ¿Y es una buena práctica usar funciones?

Answer 1

Cuando llame al widget Flutter, asegúrese de utilizar la palabra clave const. Por ejemplo, const MyListWidget();

Answer 2

He estado investigando sobre este tema durante los últimos 2 días. Llegué a la siguiente conclusión: está bien dividir partes de la aplicación en funciones. Es ideal que esas funciones devuelvan un StatelessWidget , por lo que se pueden hacer optimizaciones, como hacer que el StatelessWidget const , para que no se reconstruya si no es necesario. Por ejemplo, esta pieza de código es perfectamente válida:

import ''package:flutter/material.dart'';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ''Flutter Demo'',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: ''Flutter Demo Home Page''),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState 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>[
Text(
''You have pushed the button this many times:'',
),
Text(
''$_counter'',
style: Theme.of(context).textTheme.display1,
),
const MyWidgetClass(key: const Key(''const'')),
MyWidgetClass(key: Key(''non-const'')),
_buildSomeWidgets(_counter),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: ''Increment'',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
Widget _buildSomeWidgets(int val) {
print(''${DateTime.now()} Rebuild _buildSomeWidgets'');
return const MyWidgetClass(key: Key(''function''));
// This is bad, because it would rebuild this every time
// return Container(
// child: Text("hi"),
// );
}
}
class MyWidgetClass extends StatelessWidget {
const MyWidgetClass({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
print(''${DateTime.now()} Rebuild MyWidgetClass $key'');
return Container(
child: Text("hi"),
);
}
}

El uso de la función allí es perfectamente correcto, ya que devuelve un estado const StatelessWidget . Por favor corrígeme si estoy equivocado.

Answer 3

TL; DR: Nunca utilice funciones sobre clases para hacer un árbol de widgets reutilizable . Siempre extraiga estos en un StatelessWidget lugar.

Hay una gran diferencia entre usar funciones en lugar de clases, es decir: el marco no tiene conocimiento de las funciones, pero puede ver las clases.

Considere la siguiente función "widget":

Widget functionWidget({ Widget child}) {
return Container(child: child);
}

utilizado de esta manera:

functionWidget(
child: functionWidget(),
);

Y es equivalente a la clase:

class ClassWidget extends StatelessWidget {
final Widget child;
const ClassWidget({Key key, this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: child,
);
}
}

utilizado así

new ClassWidget(
child: new ClassWidget(),
);

En el papel, ambos parecen hacer exactamente lo mismo: crear 2 Container , con uno anidado en el otro. Pero la realidad es ligeramente diferente.

En el caso de las funciones, el árbol de widgets generado se ve así:

Container
Container

Mientras que con las clases, el árbol de widgets es:

ClassWidget
Container
ClassWidget
Container

Esto es muy importante porque cambia radicalmente el comportamiento del marco al actualizar un widget. Aquí hay una lista curada de las diferencias:

1. Clases:

   • permitir la optimización del rendimiento (constructor const, operador == anulación, reconstrucción más granular)
   • tener recarga en caliente
   • se integran en el inspector de widgets (debugFillProperties)
   • puede definir claves
   • puede usar la API de contexto
   • Asegurar que todos los widgets se usen de la misma manera (siempre un constructor)
   • asegúrese de que al cambiar entre dos diseños diferentes se eliminen correctamente los recursos (las funciones pueden reutilizar algún estado anterior)

2. Funciones:

   • tengo menos código (e incluso allí, hice un generador de código para hacer clases tan pequeñas como funciones: functional_widget )
   • ?

La conclusión ya debería ser bastante clara:

No utilice funciones para crear widgets .