Crear proyecto Flutter nuevo
Configuración · Patrón / sintaxisflutter create my_app Busca por código, tarea o categoría en español o inglés. Cada entrada tiene un enlace para guardarla o compartirla.
Mostrando 51 de 51 entradas
Flutter: importa package:flutter/material.dart. Los fragmentos van dentro de tu app; los patrones requieren completar las variables o los puntos suspensivos.
flutter create my_app flutter run flutter build apk --release flutter build ios --release Requiere macOS, Xcode y configuración de firma para compilar para dispositivo.
Documentaciónflutter pub add package_name flutter pub get flutter doctor flutter clean Text('Hello', style: TextStyle(fontSize: 20)) Icon(Icons.star, color: Colors.amber) Image.asset('assets/logo.png') Declara assets/logo.png en pubspec.yaml dentro de flutter: assets:.
Image.network('https://...') ElevatedButton(onPressed: () {}, child: Text('Go')) TextButton(onPressed: () {}, child: Text('Go')) IconButton(icon: Icon(Icons.add), onPressed: () {}) TextField(decoration: InputDecoration(labelText: 'Name')) Switch(value: on, onChanged: (v) {}) Checkbox(value: checked, onChanged: (v) {}) CircularProgressIndicator() Container(padding: EdgeInsets.all(16), color: Colors.blue) Padding(padding: EdgeInsets.all(8), child: ...) Center(child: ...) Column(children: [w1, w2, w3]) Row(children: [w1, w2, w3]) Stack(children: [bg, overlay]) Expanded(flex: 2, child: ...) Úsalo bajo Row, Column o Flex con espacio acotado en el eje principal.
SizedBox(height: 16, width: 200) Wrap(children: [...]) SingleChildScrollView(child: Column(...)) ListView.builder(itemCount: n, itemBuilder: (c, i) => ...) GridView.count(crossAxisCount: 2, children: [...]) import 'package:flutter/material.dart';
void main() => runApp(const MaterialApp(home: Greeting()));
class Greeting extends StatelessWidget {
const Greeting({super.key});
@override
Widget build(BuildContext context) {
return const Scaffold(body: Center(child: Text('Hello')));
}
} Archivo lib/main.dart completo para un proyecto Flutter. Los demás fragmentos de widgets de esta página van dentro de una app existente.
Documentaciónclass MyWidget extends StatefulWidget {
State<MyWidget> createState() => _S();
} setState(() { count++; }); @override
void initState() { super.initState(); } @override
void dispose() { ...; super.dispose(); } final _controller = TextEditingController(); Conserva el controlador en State, pásalo a TextField(controller: ...) y libéralo en State.dispose().
final count = ValueNotifier<int>(0);
ValueListenableBuilder<int>(
valueListenable: count,
builder: (context, value, child) => Text('$value'),
) Conserva count como campo de State, cambia count.value para actualizar y llama a count.dispose() desde State.dispose().
DocumentaciónFutureBuilder(future: fetch(), builder: (c, snap) => ...) StreamBuilder(stream: s, builder: (c, snap) => ...) Navigator.push(context, MaterialPageRoute(builder: (c) => NextPage())) Usa un callback con BuildContext bajo Navigator. Define NextPage o value donde se utilicen.
DocumentaciónNavigator.pop(context) Llama desde un callback de una ruta de la que puedas volver. El contexto debe estar bajo su Navigator.
DocumentaciónNavigator.pushNamed(context, '/details') Registra '/details' en MaterialApp.routes o usa onGenerateRoute. Las rutas nombradas no se recomiendan para la mayoría de apps nuevas; usa un paquete de rutas para enlaces profundos complejos.
DocumentaciónNavigator.pushReplacement<void, void>(
context,
MaterialPageRoute<void>(builder: (_) => NextPage()),
); Dentro de un callback con context bajo Navigator; define NextPage en tu app.
Documentaciónfinal result = await Navigator.push<String>(
context,
MaterialPageRoute<String>(builder: (_) => NextPage()),
);
if (!context.mounted) return; Usa un callback async. NextPage puede devolver un String con Navigator.pop(context, value); volver sin valor devuelve null.
DocumentaciónNavigator.pop(context, value); El tipo de value debe coincidir con el tipo de resultado de la ruta abierta.
DocumentaciónEdgeInsets.symmetric(horizontal: 16, vertical: 8) BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(8)) Theme.of(context).textTheme.headlineLarge MediaQuery.of(context).size.width MaterialApp(theme: ThemeData(primarySwatch: Colors.blue)) Consulta comandos CLI, widgets y patrones de layout, estado y navegación de Flutter. Busca por categoría o código, copia un fragmento o guarda el enlace de su entrada. Los patrones requieren tus variables, árbol de widgets y contexto de aplicación.
Usa Expanded dentro de Row, Column o Flex con restricciones acotadas. Libera los controladores de State con dispose. Después de una operación asíncrona, comprueba context.mounted antes de usar ese contexto. Las rutas nombradas requieren registro; los enlaces profundos complejos suelen necesitar una solución de enrutamiento. Consulta la documentación enlazada junto a las entradas.
Gratis. Sin registro. Tus datos permanecen en tu navegador. Anuncios mediante Google AdSense (con consentimiento).
Por Marco B. ·