flutter:注意点&快速代码&链接虚拟机&改配置 (一)

简介: 这段内容主要介绍了Flutter开发中的一些注意事项和快速代码示例。首先,在构建Flutter小程序时,`setState`方法只能在`StatefulWidget`和`State`类中使用,且初始化数据应放在`initState`方法内。接着,通过一个简单的示例展示了如何构建一个包含`Scaffold`的基本Flutter应用,并指出了在`MaterialApp`中移除调试横幅的方法。此外,文档还提供了关于搭建Flutter开发环境、配置虚拟机、解决安装错误以及配置相关文件(如`build.gradle`)的指导信息。

前言

在现代移动应用开发中,Flutter以其高效的开发体验和优秀的性能逐渐成为开发者的热门选择。为了帮助开发者更好地理解Flutter的使用,我们将探讨一些关键注意事项和快速代码示例。在构建Flutter小程序时,了解StatefulWidget和State类的使用限制,以及如何合理地初始化数据,是打造流畅应用的基础。

注意点

在构建Flutter小部件时,setState 方法是在使用 StatefulWidget 和 State 类时可用的。然而,根据您提供的代码片段,它似乎是在一个独立的函数中使用的,而不是在 StatefulWidget 中。

setstate   不可 在  widget  中 使用

初始化 数据  需要 放入在initState 里面

在 materialApp  里面  添加
debugShowCheckedModeBanner: false, //  将标题 上的  debug 删除

快速代码

先 写 一个  组件

里面 包含 所需的东西

scaffold , 。。。

再写一个组件

materialApp  里面 home 包含 第一个 组件

最后写main 方法

import 'package:flutter/material.dart';
class MyTest extends StatefulWidget {
  const MyTest({Key? key}) : super(key: key);
  @override
  State<MyTest> createState() => _MyTestState();
}
class _MyTestState extends State<MyTest> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("title"),
      ),
      body: Center(
        child: Text("hello,world"),
      ),
    );
  }
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyTest(),
    );
  }
}
void main() {
  runApp(const MyApp());
}

连接虚拟机

1.3 搭建Flutter开发环境 | 《Flutter实战·第二版》

镜像

键为等号左边的

值为等号右边的

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

如果你想在Windows系统自带命令行运行flutter命令,需要添加以下环境变量到用户PATH:

  • 在开始菜单的搜索功能键入“env”,然后选择 编辑系统环境变量
  • 在“用户变量”下检查是否有名为“Path”的条目:
  • 如果该条目存在, 追加 flutter\bin的全路径,使用 ; 作为分隔符.
  • 如果该条目不存在,创建一个新用户变量 Path ,然后将 flutter\bin 的全路径作为它的值.

重启Windows以应用此更改.

错误 安装

X cmdline-tools component is missing

android studio

X Android license status unknown.

改 jdk  的 版本  

使用

flutter devices

flutter run -d windows

不行 就 重新 创建 项目

一些命令


改配置

下载fluuter插件

sdk的位置选择为flutter 目录

yaml  为后缀的   是语法检查 可给注释

在build.gradle  文件夹下面

添加厂库

第一步:添加以下这三行代码,同时把google() 、jcenter()注释掉
               maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public'}

第二步:位置在D:\Flutter\flutter\packages\flutter_tools\gradle(也就是flutter的sdk下面的文件的位置,会有个flutter.gradle的文件,用记事本打开)
添加以下这三行代码,同时把google() 、jcenter()注释掉
maven { url ‘[https://maven.aliyun.com/repository/google’](https://maven.aliyun.com/repository/google’) }
maven { url ‘[https://maven.aliyun.com/repository/jcenter’](https://maven.aliyun.com/repository/jcenter’) }
maven { url ‘[http://maven.aliyun.com/nexus/content/groups/public’}](http://maven.aliyun.com/nexus/content/groups/public’})

相关文章
|
6月前
|
数据安全/隐私保护 虚拟化 Windows
如何在 VM 虚拟机中安装 Windows 7 操作系统保姆级教程(附链接)
如何在 VM 虚拟机中安装 Windows 7 操作系统保姆级教程(附链接)
如何在 VM 虚拟机中安装 Windows 7 操作系统保姆级教程(附链接)
|
6月前
|
Ubuntu Windows
【Ubuntu/Arm】Ubuntu 系统如何链接有线网络(非虚拟机)?
【Ubuntu/Arm】Ubuntu 系统如何链接有线网络(非虚拟机)?
|
6月前
|
数据安全/隐私保护 虚拟化 Windows
如何在 VM 虚拟机中安装 Windows Server 2012 操作系统保姆级教程(附链接)
如何在 VM 虚拟机中安装 Windows Server 2012 操作系统保姆级教程(附链接)
|
6月前
|
数据安全/隐私保护 虚拟化 Windows
如何在 VM 虚拟机中安装 Windows XP 操作系统保姆级教程(附链接)
如何在 VM 虚拟机中安装 Windows XP 操作系统保姆级教程(附链接)
|
6月前
|
Linux 网络安全 数据安全/隐私保护
如何在 VM 虚拟机中安装 CentOS Linux 9 操作系统保姆级教程(附链接)
如何在 VM 虚拟机中安装 CentOS Linux 9 操作系统保姆级教程(附链接)
|
6月前
|
安全 Linux 网络安全
如何在 VM 虚拟机中安装 Red Hat Enterprise Linux 9.3 操作系统保姆级教程(附链接)
如何在 VM 虚拟机中安装 Red Hat Enterprise Linux 9.3 操作系统保姆级教程(附链接)
|
1月前
|
存储 开发框架 开发者
flutter:代码存储&基本组件 (五)
本文档介绍了Flutter中的一些基本组件和代码示例,包括代码存储、基本组件如AppBar的简单使用、可滑动切换的标签栏、TextField的多种用法(如简单使用、登录页面、文本控制器的监听与使用、修饰等),以及如何实现点击空白区域隐藏键盘等功能。通过这些示例,开发者可以快速掌握在Flutter应用中实现常见UI元素的方法。
|
1月前
|
IDE 调度 开发工具
鸿蒙Flutter实战:08-如何调试代码
本文介绍了鸿蒙Flutter项目的开发环境搭建、配置、日志查看及调试方法。首先按照指南搭建开发环境,安装IDE插件;接着配置vscode的launch.json文件;通过IDE调试控制台或命令行查看日志;提供两种调试Flutter的方式,包括IDE直接运行和使用DevEco;最后介绍ArkTs和Webview的调试方法。
52 0
|
3月前
|
Dart
Flutter之ExpansionTile实现以代码方式码折叠、展开
Flutter之ExpansionTile实现以代码方式码折叠、展开
127 4
|
3月前
|
Dart
Flutter笔记:手动配置VSCode中Dart代码自动格式化
Flutter笔记:手动配置VSCode中Dart代码自动格式化
478 5