🔥 Flutter Desde Cero - Guía Completa

Flutter es un framework de Google para crear aplicaciones móviles nativas (iOS y Android) con una sola base de código.

Características:

• Hot Reload - Ve los cambios al instante
• Un solo código para iOS y Android
• Rendimiento nativo
• Lenguaje Dart

Windows:

# 1. Descargar Flutter SDK desde flutter.dev
# 2. Extraer el ZIP
# 3. Agregar a PATH
flutter doctor

Android Studio:

# Instalar Android Studio
# Configurar Android SDK
# Crear emulador

Verificar:

flutter --version
flutter doctor

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hola Mundo')),
        body: Center(child: Text('¡Hola Flutter!')),
      ),
    ),
  );
}

Crear proyecto:

flutter create mi_app
cd mi_app
flutter run

// Text
Text('Hola Mundo', style: TextStyle(fontSize: 24))

// Container
Container(
  padding: EdgeInsets.all(16),
  child: Text('Contenido'),
)

// Row y Column
Row(
  children: [Text('A'), Text('B')],
)

Column(
  children: [Text('1'), Text('2')],
)

// Image
Image.network('https://ejemplo.com/img.png')

class Contador extends StatefulWidget {
  @override
  _ContadorState createState() => _ContadorState();
}

class _ContadorState extends State {
  int _contador = 0;

  void _incrementar() {
    setState(() {
      _contador++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('$_contador'),
        ElevatedButton(
          onPressed: _incrementar,
          child: Text('Incrementar'),
        ),
      ],
    );
  }
}

// Navegar a otra pantalla
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => PantallaDos(),
  ),
);

// Con nombre
Navigator.pushNamed(context, '/detalle');

// Pasar datos
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetalleScreen(datos: producto),
  ),
);

// Regresar
Navigator.pop(context);

// ListView.simple
ListView(
  children: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
  ],
)

// ListView.builder (eficiente)
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(title: Text(items[index]));
  },
)

// GridView
GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemBuilder: (context, index) {
    return Card(child: Center(child: Text('${index+1}')));
  },
)

final _formKey = GlobalKey<FormState>();
final _nombreController = TextEditingController();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        controller: _nombreController,
        decoration: InputDecoration(labelText: 'Nombre'),
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'Ingresa tu nombre';
          }
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // Procesar datos
          }
        },
        child: Text('Enviar'),
      ),
    ],
  ),
)

// 1. Crear provider
class ContadorProvider extends ChangeNotifier {
  int _contador = 0;
  int get contador => _contador;

  void incrementar() {
    _contador++;
    notifyListeners();
  }
}

// 2. Proveer en main
MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (_) => ContadorProvider()),
  ],
  child: MyApp(),
)

// 3. Consumir
Consumer<ContadorProvider>(
  builder: (context, provider, child) {
    return Text('${provider.contador}');
  },
)

// pubspec.yaml
dependencies:
  firebase_core: ^2.0.0
  cloud_firestore: ^4.0.0

// main.dart
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

// Firestore
final db = FirebaseFirestore.instance;

// Guardar
await db.collection('usuarios').add({
  'nombre': 'Juan',
  'edad': 30,
});

// Leer
final snapshot = await db.collection('usuarios').get();
for (var doc in snapshot.docs) {
  print(doc.data());
}

// pubspec.yaml
dependencies:
  http: ^1.0.0

// GET request
import 'dart:convert';
import 'package:http/http.dart' as http;

Future<List<dynamic>> fetchUsuarios() async {
  final response = await http.get(
    Uri.parse('https://api.ejemplo.com/usuarios'),
  );
  
  if (response.statusCode == 200) {
    return json.decode(response.body);
  } else {
    throw Exception('Error al cargar');
  }
}

// POST request
await http.post(
  Uri.parse('https://api.ejemplo.com/usuarios'),
  headers: {'Content-Type': 'application/json'},
  body: json.encode({'nombre': 'Juan'}),
);

Google Play Store:

• Crear cuenta de desarrollador ($25 una vez)
• Generar APK firmado: flutter build appbundle
• Crear listing en Play Console
• Subir APK y completar información
• Enviar a revisión

Apple App Store:

• Crear cuenta Apple Developer ($99/año)
• Generar IPA: flutter build ipa
• Usar Xcode para subir a App Store Connect
• Completar metadata y capturas
• Enviar a revisión