【Android-Flutter】Minha jornada de desenvolvimento do Flutter

Zero, documentação:

Site oficial estrangeiro ( ❌科学上网): https://flutter.dev/
Documentos estrangeiros: https://docs.flutter.dev/

Site oficial nacional: https://flutter.cn
Documentos nacionais: https://flutter.cn/docs/

Outros documentos da versão chinesa ( 更适合新手): https://doc.flutterchina.club

---

1. Configure um ambiente de desenvolvimento Flutter no Windows

❌Isso significa que pode não estar acessível na China e que outros meios, como o acesso científico à Internet, podem ser necessários.

(1) Use espelho chinês (❌Veja a documentação oficial para detalhes)

• 将如下环境变量加入到【用户环境变量】中：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

• 在Windows中操作示例：
  

(2) Baixe a versão mais recente do Flutter SDK (já inclui Dart)

• Vá para 上面提供的官网download, como ❌https://docs.flutter.dev/release/archive?tab=windows#windows - se você não consegue acessá-lo do exterior, basta dar uma olhada no nacional ou ficar on-line cientificamente .

• Após a conclusão do download, descompacte-o na unidade C e crie um novo diretório para gerenciamento ( 不要放在高权限的路径por exemplo, não coloque-o em C:\Arquivos de Programas\).

• Este SDK é na verdade um comando, então precisamos configurar variáveis ​​de ambiente para facilitar o uso: como outros SDKs, em " " 用户变量: “Pathadicione um flutter\bincaminho completo como seu valor - Dica: o nome do comando éflutter

(3) Execute o primeiro comando flutter - flutter doctor(comando doctor check)

提示：Primeira corrida任意一个flutter命令（如flutter doctor等）时，它会下载它自己的依赖项并自行编译。
第一次可能会慢许多。以后再运行就会快得多。

Resultados da execução:
·
Verificação de problemas + ideias de soluções:

1. Flutter SDK 是否成功安装和配置环境变量？Se ❌, repita as etapas anteriores para instalar e variáveis ​​de ambiente.

2. 你的Windows系统版本是否是10以及以上？Se ❌, atualize para o Windows 10 ou 11

3. Android SDK工具是否符合要求？Se ❌, verifique o download das ferramentas relevantes no Android Studio:
   
   Pode haver um aviso aqui, execute os comandos relevantes de acordo com as instruções e concorde com o acordo:
   这个警告因为Você não concorda com o acordo ，所以你需要运行一下它提示的这个命令同意一下协议：
   flutter doctor --android- licenças`

4. 是否安装谷歌浏览器？Se ❌, instale o navegador Chrome.

5. 是否安装Visual studio？Se ❌ e você precisar desenvolver aplicativos de desktop, instale-o.

6. 是否安装Androidl studio？Se ❌, instale AS, mas mesmo que esteja instalado, você ainda poderá encontrar um problema, ou seja, o caminho Java não pode ser encontrado: o
   Android Studio não consegue encontrar a versão JAVA (versão JDK)

Solução:
copie os arquivos do JDK para o jre no diretório de instalação do Android Studio:

7. 是否有可连接的设备，比如Chrome等浏览器、Android模拟器、USB链接调试的Android手机等等Se ❌, baixe + conecte ou conecte mais tarde

8. 网络资源能否正确获取？Se ❌, significa que sua imagem não está configurada corretamente ou que a imagem está indisponível no momento.

Outras perguntas que você pode encontrar:

Usando o instalador JDK (exe), as variáveis ​​de ambiente JDK são configuradas automaticamente. Se houver várias versões, você precisará excluí-las na variável de sistema Path. (Caso contrário, será confuso)

---

(4) Instale os plug-ins Flutter e Dart no Android Studio para facilitar o uso

Agora que instalou o Flutter, você será solicitado a instalar o plug-in Dart. Se sim 没提示, 自己搜索Dart插件instale-o.

Reinicie o AS e você verá que pode 直接使用AScriar um novo projeto Flutter:

---

2. Crie e execute o projeto Flutter

Obs: Quando fiz esse registro, era agosto de 2023. Todas as versões acabaram de ser baixadas, então se você usar uma versão antiga a interface pode ser diferente!

(1). Crie um novo projeto Flutter no Android Sudio

(2) Selecione flutter. Você precisa configurá-lo pela primeira vez flutter SDK. O caminho é a camada superior do diretório bin (ou seja flutter目录)

Como mostrado na imagem:

(3) Preencha você mesmo as informações do projeto. O último lembrete significa:

(1) Quando criado, o novo projeto será executado nas plataformas selecionadas (outros poderão ser adicionados posteriormente
) 可以稍后添加.
(2) Criar projeto offline
cria um projeto offline e não requer Internet para baixar os recursos necessários, como Flutter SDK (certifique-se de ter concluído a instalação, não é necessário verificar isso)

(4) Após a criação de um novo projeto, o código está localizado em lib/main.dart.

(5) Ele roda muito rápido no navegador, mas é muito lento no celular (a construção demorou muito, mas falhou).

我第一次运行的时候出现一个问题，就是构建很久，似乎构建不出来。

所以怀疑是gradle工具出错了（可能是之前新建项目，没构建成功，也就是gradle没下载完成，就手动强制退出AS了，导致工具不完整。）
我的解决办法是瞎弄出来的。我就是在插件市场，下载一个Gradle升级的辅助插件，然后自己科学上网，每次重启它会检查然后会自动把Gradle插件升级到最新了。

在这个过程中发生一个扯淡的问题，就是我可能不小心把其他插件禁用掉了，导致新建项目的选项里没有Flutter项目。
网上说是把这玩意插件给禁了，重新打开就行了：

---

3. Estrutura do projeto + código de exemplo de análise

(1) Alguns conhecimentos comuns:

1. Alinhe os recuos automaticamente: clique com o botão direito na área do código Dart e selecione Reformatar código com dartfmt.
2.

(2) Análise de código:

1、引入一个库文件：
Material de importação: é uma linguagem de design visual padrão para dispositivos móveis e web.
Flutter fornece um rico conjunto de widgets de materiais.

import 'package:flutter/material.dart';

2、入口函数main：
De acordo com a sintaxe do Dart, pode ser alterado para
void main() => runApp(const MyApp());
Nota: A função principal usa o símbolo (=>), que é a abreviatura de uma função ou método de linha única em Dardo

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

3、StatelessWidget无状态和StatefulWidget有状态
StatelessWidget é uma classe de componente imutável que representa um fragmento estático da interface do usuário. Sua característica é que, uma vez criado, suas propriedades ou status não podem ser alterados. Normalmente é usado para exibir conteúdo estático e não requer uma interface que muda com o tempo. Por exemplo, um rótulo de texto simples ou uma imagem estática pode ser criado usando um StatelessWidget.
·
StatefulWidget (componente stateful): StatefulWidget é uma classe de componente mutável que representa um fragmento da interface do usuário que pode ser renderizado novamente com base em mudanças no estado interno. Sua característica é que pode conter estados e atributos variáveis, e a interface pode ser atualizada dinamicamente de acordo com mudanças de estado. StatefulWidget geralmente é usado para interfaces que precisam responder à interação do usuário, alterações de dados ou alterações de horário. Por exemplo, um componente de contador pode ser criado usando um StatefulWidget, onde o valor do contador pode ser incrementado ou decrementado com base nas ações do usuário.
·
Observe que muitos novatos não entenderão 不可变onde esse " " aparece? Todos sabemos que uma classe geralmente contém duas partes: 属性值+ 方法函数
que 属性值é usada para descrição 这个类的属性状态. Então, estamos falando de imutabilidade 可变不可变nisso . Por exemplo, existe um em um , isto é . Mas os componentes são semelhantes a uma árvore, ou seja, o componente A pode conter o componente B. Suponha que o componente A seja imutável e o componente B seja mutável. Tudo bem, porque é imutável e é o valor do atributo de um determinado componente. Não tem nada a ver com outros componentes (mesmo os componentes que você inclui). Muitos novatos não conseguem compreender esta mudança e acham difícil entendê-la. · Utilizar a separação entre StatelessWidget e StatefulWidget pode trazer alguns benefícios:这个类中定义的变量值
继承自无状态的类变量a属性值a不可变的



(1) Otimização do desempenho de renderização: como o StatelessWidget é imutável, quando a interface não precisa ser renderizada novamente, o Flutter pode evitar operações desnecessárias de redesenho, melhorando assim o desempenho.
(2) Gerenciamento de estado: StatefulWidget permite gerenciar o estado dentro do componente.Quando o estado muda, o Flutter acionará automaticamente a nova renderização. Isso permite que você lide facilmente com as interações do usuário ou alterações de dados e atualize a interface em tempo hábil.
(3) Reutilização de componentes: Ao separar a parte estática da parte dinâmica da interface, a reutilização de componentes pode ser melhor alcançada. Você pode definir a estrutura da interface estática em StatelessWidget e, em seguida, manipular a lógica dinâmica e o estado em StatefulWidget.
·
Resumindo, StatelessWidget é usado para representar fragmentos de interface estática, enquanto StatefulWidget é usado para representar fragmentos de interface dinâmica que precisam ser renderizados novamente de acordo com as mudanças de estado. Essa separação torna a construção da interface do Flutter mais flexível, eficiente e mais fácil de manter.

// 1/3 不可变（无状态）
class MyApp extends StatelessWidget {
    
    
  const MyApp({
    
    super.key});
  // 1、变量属性值区域：此处没有。
  // This widget is the root of your application.
  // 这是一个widget（组件）
  // 这是你应用的根部组件（也就是第一个）
  // 2、函数方法区域：
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        // 这部分是应用的主题。
        //
        // TRY THIS: 
        // Try running your application with "flutter run". You'll see the application has a blue toolbar. 
        // 尝试运行你的应用（使用flutter run命令），就会看到应用上有一个深紫色的导航条
        // Then, without quitting the app,
        // try changing the seedColor in the colorScheme below to Colors.green
        // and then invoke "hot reload" (save your changes or press the "hot reload" button 
        // in a Flutter-supported IDE, or press "r" if you used the command line to start the app).
        // 它的就是想说，它支持热加载，你需要把下面的颜色改成Colors.green绿色，然后点击“热加载”按钮，也就是AS右上角的闪电按钮
        // 或者直接运行，就能够看到修改结果。意思就是不需要重新进行项目编译，这叫热加载。
        // Notice that the counter didn't reset back to zero; the application
        // state is not lost during the reload. To reset the state, use hot restart instead.
        // 注意，你在手机上点几下计数器，热加载以后，计数器并不会清零。也就是说，没有进行修改的部分在热加载过程中不会改变状态。
        // 如果你想改变状态，需要热重启替代。
        // This works for code too, not just values: Most code changes can be tested with just a hot reload.
        // 这也适用于代码，而不仅仅是值:大多数代码更改都可以通过热（重新）加载进行测试。热加载适合代码快速测试。
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),//这是一个有状态的组件，说明在无状态组件里，
      //是可以调用任何组件的，不区分有无状态。有无状态的组件说明的是，这个组件本身的属性，而别的组件的属性就不归它管了。
    );
  }
}

// 2/3  可变（有状态）：其实就是需要重写一个方法。并使用这个方法来构建一个具有状态的对象。
class MyHomePage extends StatefulWidget {
    
    
  const MyHomePage({
    
    super.key, required this.title});

  /*
    This widget is the home page of your application. It is stateful, meaning that
    it has a State object (defined below) that contains fields that affect how it looks.
    这个小部件是应用程序的主页。它是有状态的，也就是说
    它有一个State对象(定义如下)，其中包含影响其外观的字段。
  */

  /*
    This class is the configuration for the state. It holds the values (in this case the title)
    provided by the parent (in this case the App widget) and
    used by the build method of the State. Fields in a Widget subclass are always marked "final".
    这个类是状态的配置。它保存值(在本例中为标题)
    由父组件提供(在本例中是App小部件)和
    由该状态的构建方法使用。Widget子类中的字段总是被标记为“final”。
  */

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

//  3/3------------------------------------------------
class _MyHomePageState extends State<MyHomePage> {
    
    
  int _counter = 0;

  void _incrementCounter() {
    
    
    setState(() {
    
    
      /*
      This call to setState tells the Flutter framework that something has
      changed in this State, which causes it to rerun the build method below
      so that the display can reflect the updated values. If we changed
      _counter without calling setState(), then the build method would not be
      called again, and so nothing would appear to happen.
      调用setState来告诉Flutter框架，此状态中有东西发生了变化，
      这导致它重新运行下面的构建方法，以便显示可以反映更新的值。
      如果我们在没有调用setState()的情况下修改了_counter，那么build方法将不会再次被调用，因此什么也不会发生。
      */
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    
    
    /*This method is rerun every time setState is called, for instance as done
    by the _incrementCounter method above.
    每次调用setState时都会重新运行这个方法，例如上面的_incrementCounter方法。

    The Flutter framework has been optimized to make rerunning build methods
    fast, so that you can just rebuild anything that needs updating rather
    than having to individually change instances of widgets.
    Flutter框架经过优化，可以快速重新运行构建方法，这样你就可以重新构建任何需要更新的东西，而不必单独更改部件实例。
    */
    return Scaffold(
      appBar: AppBar(
        /*TRY THIS: Try changing the color here to a specific color (to
        Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
        change color while the other colors stay the same.
        试试这个:尝试将这里的颜色更改为特定的颜色(到Colors。可能是琥珀色?)，并触发热重载，以看到应用栏改变颜色，而其他颜色保持不变。
        */
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        /*Here we take the value from the MyHomePage object that was created by
        the App.build method, and use it to set our appbar title.
        这里，我们从App.build方法创建的MyHomePage对象中获取值，并使用它来设置appbar标题。
        */
        title: Text(widget.title),
      ),
      body: Center(
        /*Center is a layout widget. It takes a single child and positions it
        in the middle of the parent.
        Center是一个布局部件。它接收一个子元素，并将其放置在父元素的中间。
        */
        child: Column(
          /*Column is also a layout widget. It takes a list of children and
          arranges them vertically. By default, it sizes itself to fit its
          children horizontally, and tries to be as tall as its parent.
          Column也是一个布局部件。它接收一个子元素列表，并将它们垂直排列。
          默认情况下，它会调整自己的大小以适应它的子元素，并尽量与父元素一样高。

          Column has various properties to control how it sizes itself and
          how it positions its children. Here we use mainAxisAlignment to
          center the children vertically; the main axis here is the vertical
          axis because Columns are vertical (the cross axis would be horizontal).
          列有各种属性来控制它自己的大小以及子元素的位置。这里我们使用mainAxisAlignment来让子元素垂直居中;
          这里的主轴是纵轴，因为列是垂直的(交叉轴是水平的)。

          TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
          action in the IDE, or press "p" in the console), to see the
          wireframe for each widget.
          试试这个:调用“debug painting”(在IDE中选择“Toggle debug Paint”操作，或者在控制台中按“p”)，以查看每个部件的线框。
          */
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods。末尾的逗号使构建方法的自动格式化更好。.
    );
  }
}

4. E-book de leitura obrigatória: "Flutter in Action · Segunda Edição"

5. Exemplos oficiais imperdíveis❌

Você pode ir ao github e procurar por flutter.
Você verá:
>É recomendado baixar mais alguns exemplos e executá-los. Leia mais livros e pense mais sobre a prática. Basicamente você sabe como usar o Flutter.

Abra o projeto importado, pode ser necessário configurar os caminhos Dart e Flutter.