Use o Flutter para desenvolver aplicativos front-end multiplataforma

Com a diversificação de dispositivos móveis e sistemas operacionais, o desenvolvimento de aplicativos front-end multiplataforma tornou-se um tópico importante no desenvolvimento front-end. Como uma estrutura de desenvolvimento de aplicativos móveis multiplataforma, o Flutter pode oferecer suporte a plataformas como iOS, Android e Web ao mesmo tempo, reduzindo bastante os custos de desenvolvimento e melhorando a eficiência do desenvolvimento. Este blog o guiará passo a passo para entender como usar o Flutter para desenvolver aplicativos front-end de plataforma cruzada, incluindo conteúdo principal, como construção de ambiente, uso básico, design de interface do usuário, gerenciamento de estado e solicitações de rede.

2. Construção do ambiente

Antes de começar a desenvolver com o Flutter, precisamos configurar um ambiente de desenvolvimento.

2.1 Instale o Flutter SDK

Primeiro, precisamos instalar o Flutter SDK. O Flutter fornece uma variedade de ferramentas e bibliotecas que podem nos ajudar a desenvolver aplicativos front-end multiplataforma.

Acesse o site oficial do Flutter ( https://flutter.dev/) para baixar o Flutter SDK correspondente ao sistema operacional.
Descompacte o SDK baixado e adicione-o à variável de ambiente PATH do sistema.

2.2 Instalar IDE

O Flutter oferece suporte a vários ambientes de desenvolvimento integrado (IDEs), como Android Studio, Visual Studio Code, etc. Escolha um IDE que você conheça ou goste de desenvolver.

Android Studio: Abra o Android Studio, instale o plugin Flutter e crie um projeto Flutter.
Visual Studio Code: abra o VS Code, instale o plug-in Flutter e crie um projeto Flutter por meio da função de extensão do VS Code.

2.3 Verifique o ambiente

Execute o seguinte comando para verificar se o ambiente Flutter foi criado com sucesso:

flutter doctor

Se tudo correr bem, você deverá ver uma saída semelhante à seguinte:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on macOS 11.4 20F71 darwin-x64, locale en-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 12.5.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] VS Code (version 1.58.0)
[✓] Connected device (3 available)

• No issues found!

3. Crie seu primeiro aplicativo Flutter

Depois de configurar o ambiente de desenvolvimento, podemos começar a criar o primeiro aplicativo Flutter.

3.1 Crie um projeto Flutter usando a linha de comando

Execute o seguinte comando para criar um hello_flutterprojeto Flutter chamado:

flutter create hello_flutter

hello_flutterIsso criará um projeto Flutter nomeado no diretório atual .

3.2 Executando o aplicativo Flutter

Depois de criar um projeto Flutter, podemos executar o aplicativo em um emulador ou em um dispositivo real.

Usando o Android Studio: Abra o Android Studio, selecione Open an existing Android Studio project, selecione hello_fluttero diretório do projeto e clique em OK. Em seguida, escolha um emulador ou conecte-se a uma máquina real e clique no botão Executar.
Usando o VS Code: Abra o VS Code, abra hello_fluttero diretório do projeto e pressione F5ou toque no botão Executar. Escolha um emulador ou conecte-se a um dispositivo real e clique no botão Executar.

Se tudo correr bem, você verá um aplicativo Flutter simples em execução no emulador ou em um dispositivo real.

4. Conhecimento básico de Flutter

Antes de começar a desenvolver aplicativos front-end multiplataforma, precisamos entender alguns conhecimentos básicos do Flutter.

4.1 Widget

No Flutter, tudo é um Widget. Os widgets são os blocos de construção dos aplicativos Flutter e são usados para criar interfaces de usuário. O Flutter fornece um grande número de Widgets para criar diferentes elementos de interface do usuário, como texto, botões, imagens etc.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Flutter'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

No código acima, criamos um MyAppaplicativo Flutter chamado e usado MaterialApppara Scaffoldconstruir a estrutura básica do aplicativo. AppBarUsado para criar uma barra de aplicativos Centerque centraliza os componentes filhos.

4.2 Widget com estado e Widget sem estado

No Flutter, os Widgets são divididos em dois tipos: Stateful Widget e Stateless Widget.

Stateless Widget: É um Widget imutável cujas propriedades não podem ser alteradas uma vez determinadas. Por exemplo Text, Iconetc
Stateful Widget: É um Widget variável cujas propriedades podem mudar de acordo com o estado da aplicação. Por exemplo ListView, TextFieldetc

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Counter App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Count: $_count'),
              ElevatedButton(
                onPressed: _increment,
                child: Text('Increment'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

No código acima, criamos um CounterAppStateful Widget chamado Stateful Widget para exibir um contador. Clique no botão para aumentar o valor do contador.

4.3 Roteamento e Navegação

No Flutter, o roteamento e a navegação são usados para pular entre as páginas e passar dados.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

No código acima, criamos duas páginas: HomePagee SecondPage. Clique HomePageno botão para pular para SecondPagea página. Na SecondPagepágina, clique no botão para retornar à página anterior.

4.4 Solicitação de rede

No desenvolvimento real, geralmente precisamos interagir com o servidor de back-end para obter e enviar dados. O Flutter fornece httpbibliotecas para enviar solicitações HTTP.

import 'package:http/http.dart' as http;

Future<void> fetchData() async {
  final response = await http.get('https://api.example.com/data');
  if (response.statusCode == 200) {
    print('Data: ${response.body}');
  } else {
    print('Failed to load data');
  }
}

No código acima, usamos MethodChannelpara criar um Canal de Plataforma e especificar um identificador de comunicação. No Flutter, podemos invokeMethodchamar métodos no código nativo por meio de métodos e passar parâmetros. No código nativo, precisamos registrar o método correspondente e executar a lógica correspondente quando o Flutter interagir com o código nativo.

7.2 Implementando métodos em código nativo

No código nativo, precisamos usar a linguagem de desenvolvimento da plataforma correspondente para implementar os métodos definidos no Platform Channel.

Plataforma Android (Java/Kotlin):

package com.example.channel_example;

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugin.common.MethodChannel;

public class MainActivity extends FlutterActivity {
    private static final String CHANNEL = "com.example.channel";

    @Override
    public void configureFlutterEngine(FlutterEngine flutterEngine) {
        super.configureFlutterEngine(flutterEngine);
        new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL)
                .setMethodCallHandler((call, result) -> {
                    if (call.method.equals("nativeMethod")) {
                        String message = "Hello from Native";
                        result.success(message);
                    } else {
                        result.notImplemented();
                    }
                });
    }
}

No código acima, registramos FlutterMethodChannelum nativeMethodmétodo chamado com e retornamos uma mensagem simples quando chamado pelo Flutter.

8. Empacotamento e Implantação

Depois de concluir o desenvolvimento do aplicativo Flutter, podemos empacotar e implantar o aplicativo em diferentes plataformas.

8.1 Embalagem

No Flutter, podemos usar o seguinte comando para empacotar o aplicativo:

flutter build apk # 打包Android应用
flutter build ios # 打包iOS应用
flutter build web # 打包Web应用

8.2 Implantação

Após a conclusão do empacotamento, podemos carregar os arquivos de aplicativos gerados para a loja de aplicativos ou servidor da web para que os usuários baixem e usem.

Para aplicativos Android, o arquivo APK gerado pode ser carregado na Google Play Store.
Para aplicativos iOS, o arquivo IPA gerado pode ser carregado na Apple App Store.
Para aplicativos da web, os arquivos de compilação gerados podem ser carregados em um servidor da web.

9. Resumo

Por meio da demonstração prática deste blog, aprendemos como usar o Flutter para desenvolver aplicativos front-end multiplataforma, incluindo conteúdo principal, como construção de ambiente, uso básico, design de interface do usuário, gerenciamento de estado, solicitações de rede, interação entre Flutter e código nativo , embalagem e implantação.

Como uma estrutura de desenvolvimento de aplicativos móveis de plataforma cruzada, o Flutter possui funções ricas e desempenho poderoso e é de grande valor no desenvolvimento de aplicativos front-end em grande escala. Espero que este blog tenha inspirado você no desenvolvimento do Flutter, obrigado por ler!