aplicativos moveis

Ótimo! Vamos então criar um exemplo prático para Flutter e React Native para você ter um ponto de partida. Vou começar com algo simples: um aplicativo que exibe uma lista de itens e permite clicar em um deles para mostrar mais detalhes.

Exemplo em Flutter

1. Configuração

Certifique-se de que o Flutter está instalado e configurado corretamente. No terminal, crie o projeto:

2. Código do App

Edite o arquivo lib/main.dart com o seguinte código:

dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lista de Itens',
      home: ItemListScreen(),
    );
  }
}

class ItemListScreen extends StatelessWidget {
  final List<String> items = List.generate(10, (index) => 'Item ${index + 1}');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Lista de Itens')),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(items[index]),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => ItemDetailScreen(item: items[index]),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

class ItemDetailScreen extends StatelessWidget {
  final String item;

  ItemDetailScreen({required this.item});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detalhes')),
      body: Center(
        child: Text(
          'Você selecionou: $item',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

3. Rodar o App

No terminal:

Exemplo em React Native

1. Configuração

Certifique-se de ter o React Native CLI ou Expo instalado. Para este exemplo, usaremos Expo. Crie o projeto:

2. Código do App

Edite o arquivo App.js com o seguinte código:

javascript

import React from 'react';
import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';

export default function App() {
  const items = Array.from({ length: 10 }, (_, index) => `Item ${index + 1}`);

  return (
    <View style={styles.container}>
      <FlatList
        data={items}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <TouchableOpacity
            style={styles.item}
            onPress={() => alert(`Você selecionou: ${item}`)}
          >
            <Text style={styles.text}>{item}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    backgroundColor: '#f5f5f5',
  },
  item: {
    padding: 20,
    marginVertical: 5,
    backgroundColor: '#ddd',
    borderRadius: 5,
  },
  text: {
    fontSize: 18,
  },
});

3. Rodar o App

No terminal:

Abra no emulador ou em seu dispositivo físico com o app Expo Go.

Resultado

Flutter: Um app com navegação entre telas (lista e detalhes).
React Native: Um app que exibe uma lista com um alerta ao clicar em um item.

Posso ajudar a expandir esses exemplos ou responder dúvidas específicas sobre o código! 🚀