@charset "UTF-8"; .markdown-body { font-family: -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial; color: rgba(0, 50, 94, 1) } .markdown-body ::selection { background-color: rgba(0, 50, 94, 1); color: rgba(255, 255, 255, 1) } .markdown-body blockquote { padding: 10px 20px; background-color: rgba(255, 250, 240, 1); box-shadow: 0 3px 10px rgba(255, 172, 194, 0.24); border: 1px solid rgba(243, 202, 142, 1); transition: all 0.2s; margin: 1em 0; border-radius: 5px } .markdown-body blockquote p { font-size: 14px; line-height: 25px; color: rgba(121, 85, 72, 1) } .markdown-body blockquote p:last-child { margin: 0 } .markdown-body blockquote:hover { border-color: rgba(255, 152, 0, 1); background-color: rgba(255, 248, 224, 1); box-shadow: 0 6px 10px -5px rgba(225, 173, 98, 0.38) } .markdown-body blockquote code { color: rgba(255, 80, 44, 1) } .markdown-body pre { border: 1px solid rgba(140, 192, 243, 1); box-shadow: 0 3px 10px rgba(255, 198, 198, 0.28); border-radius: 5px; transition: all 0.2s; overflow-x: auto; white-space: pre-wrap } .markdown-body pre:hover { border-color: rgba(109, 157, 206, 1) } .markdown-body pre>code { padding: 10px 20px; color: rgba(0, 50, 94, 1); background: rgba(240, 248, 255, 1); font-size: 12px; line-height: 1.6; display: block } .markdown-body code { background: rgba(246, 251, 255, 1); color: rgba(11, 83, 147, 1); padding: 2px 4px; border-radius: 4px; font-size: 12px } .markdown-body p { font-size: 14px; line-height: 28px; text-align: justify; margin-bottom: 17px; color: rgba(89, 89, 89, 1) } .markdown-body a { color: rgba(0, 50, 94, 1); text-decoration: none } .markdown-body a:after { content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAQdJREFUKFNt0DtLA0EUBeBzZle0Eks7rcUfEfBRCha7NorYa6NmVJzgyi4smUgKtdZGCJktLMVH4Y8QeztLWyE7VyLEuNFbXj4Oh0P8c8mZm+uJrEN4BJFTeP/MUVe3bnocfALwkOlo1zS7iZAzf6Cx7oXgbaqjxiDEWCcVaGyxQ8pSWo9XhqhoQ/xUFbaKjhe5V+CmR7mnSplEEF6GSmJ+F/d0KHvbCIIJCLc85U6BC5mONgbJNM3uFag++sX7z8O8MzsWBucifMx0dDGE1kmm458KDVukAlnNdDz/exEeW3dNkbfsYC0xtmgDWP6ELLZ0/F6BJu/UoFQN5AkoeUjeJPvx6+i+X5Sjah4tA6gYAAAAAElFTkSuQmCC"); margin-left: 2px } .markdown-body a:hover { box-shadow: 0 1px } .markdown-body table { max-width: 100%; border-collapse: collapse; border-spacing: 0; box-shadow: 0 3px 10px rgba(255, 238, 172, 0.24); transition: all 0.2s } .markdown-body table:hover { box-shadow: 0 3px 10px rgba(185, 169, 103, 0.24) } .markdown-body table tr th { border: 1px solid rgba(140, 192, 243, 1); background-color: rgba(240, 248, 255, 1); padding: 12px 15px } .markdown-body table tr td { border: 1px solid rgba(243, 202, 142, 0.4); padding: 12px 15px } .markdown-body table tbody tr { transition: all 0.2s } .markdown-body table tbody tr:hover td { border-color: rgba(243, 202, 142, 1); background-color: rgba(255, 248, 224, 1); z-index: 1 } .markdown-body img { max-width: 100% } .markdown-body h1 { font-size: 20px; margin-top: 30px; margin-bottom: 10px; padding-left: 30px; position: relative } .markdown-body h1>code { font-size: 20px } .markdown-body h1:before { content: "🍺"; display: block; font-size: 18px; width: 18px; height: 18px; left: 0; position: absolute } .markdown-body h2 { font-size: 18px; margin-top: 30px; margin-bottom: 10px; padding-left: 28px; position: relative } .markdown-body h2>code { font-size: 18px } .markdown-body h2:before { content: "🍻"; display: block; font-size: 16px; width: 16px; height: 16px; left: 0; position: absolute } .markdown-body h3 { font-size: 16px; margin-top: 30px; margin-bottom: 10px; padding-left: 26px; position: relative } .markdown-body h3>code { font-size: 16px } .markdown-body h3:before { content: "🥂"; display: block; font-size: 14px; width: 14px; height: 14px; left: 0; position: absolute } .markdown-body h4 { font-size: 14px; margin-top: 30px; margin-bottom: 10px; padding-left: 24px; position: relative } .markdown-body h4>code { font-size: 14px } .markdown-body h4:before { content: "🥃"; display: block; font-size: 12px; width: 12px; height: 12px; left: 0; position: absolute } .markdown-body h5 { font-size: 12px; margin-top: 30px; margin-bottom: 10px } .markdown-body h5>code { font-size: 12px } .markdown-body h6 { font-size: 10px; margin-top: 30px; margin-bottom: 10px } .markdown-body h6>code { font-size: 10px } .markdown-body h1, .markdown-body h2 { color: rgba(255, 80, 44, 1) } .markdown-body hr { height: 4px; border: none; margin-top: 32px; margin-bottom: 32px; background-size: 4px 1px; background-image: linear-gradient(270deg, rgba(109, 157, 206, 1), rgba(140, 192, 243, 1) 25%, rgba(0, 0, 0, 0) 50%) } .markdown-body hr:nth-child(2n) { background-image: linear-gradient(270deg, rgba(255, 152, 0, 1), rgba(255, 248, 224, 1) 25%, rgba(0, 0, 0, 0) 50%) } .markdown-body ul { padding-inline-start: 20px } .markdown-body ul li { list-style-type: "🔸" } .markdown-body ul li li { list-style-type: "◻️" } .markdown-body ul li li li { list-style-type: "▫️" } .markdown-body ol { padding-inline-start: 20px } .markdown-body ol ::marker { color: rgba(255, 152, 0, 1) } .markdown-body ol, .markdown-body ul { line-height: 2em } .markdown-body li { padding-inline-start: 1ch } .markdown-body li.task-list-item { list-style: none; padding-inline-start: 0 } .markdown-body li input { padding-right: 2px } .markdown-body li input[type="checkbox"] { appearance: none } .markdown-body li input:before { content: "🟩"; display: block; width: 13px; height: 13px } .markdown-body li input:checked:before { content: "✅" } @media (max-width: 720px) { .markdown-body h1 { font-size: 24px } .markdown-body h2 { font-size: 20px } .markdown-body h3 { font-size: 18px } }.hljs-comment, .hljs-quote { color: rgba(107, 115, 148, 1) } .hljs-attribute, .hljs-link, .hljs-name, .hljs-regexp, .hljs-selector-class, .hljs-selector-id, .hljs-tag, .hljs-template-variable, .hljs-variable { color: rgba(201, 73, 34, 1) } .hljs-built\_in, .hljs-builtin-name, .hljs-literal, .hljs-meta, .hljs-number, .hljs-params, .hljs-type { color: rgba(199, 107, 41, 1) } .hljs-bullet, .hljs-string, .hljs-symbol { color: rgba(172, 151, 57, 1) } .hljs-section, .hljs-title { color: rgba(61, 143, 209, 1) } .hljs-keyword, .hljs-selector-tag { color: rgba(102, 121, 204, 1) } .markdown-body pre, .markdown-body pre>code.hljs { background: rgba(245, 247, 255, 1); color: rgba(94, 102, 135, 1) } .hljs-emphasis { font-style: italic } .hljs-strong { font-weight: 700 }
| 点击在线阅读，体验更好 | 链接 |
|---|---|
| 现代JavaScript高级小册 | 链接 |
| 深入浅出Dart | 链接 |
| 现代TypeScript高级小册 | 链接 |
编写第一个Flutter应用
在本文中，我们将详细介绍如何编写你的第一个Flutter应用程序：一个简单的Hello World应用。我们将使用Dart语言和Flutter框架来创建一个具有基本用户界面的应用。
步骤 1：安装 Flutter 和 Dart
首先，确保你已经安装了Flutter和Dart的开发环境。可以参考之前提供的安装指南。
步骤 2：创建新的 Flutter 项目
在命令行或终端中，进入你希望创建项目的目录，并执行以下命令来创建一个新的Flutter项目：
flutter create hello_world_app这将会创建一个名为hello_world_app的新目录，其中包含Flutter项目的初始结构。
步骤 3：编辑主要的 Dart 文件
打开你喜欢的代码编辑器（如VS Code），导航到hello_world_app/lib目录，并编辑main.dart文件。
删除初始的代码，并替换为以下内容：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello World App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Hello World'),
),
body: Center(
child: Text(
'Hello, World!',
style: TextStyle(fontSize: 24),
),
),
),
);
}
}这段代码定义了一个名为MyApp的无状态Widget，并在build方法中返回了一个MaterialApp，其中包含一个Scaffold。Scaffold是一个常用的基本布局，包含一个AppBar和一个居中对齐的Text Widget，显示了"Hello, World!"。
步骤 4：运行应用程序
回到命令行或终端，确保你仍然在hello_world_app目录下。执行以下命令来运行你的应用程序：
flutter run这将会在连接的设备或模拟器上启动你的Flutter应用程序。你将看到应用程序的界面显示了"Hello, World!"的文本。
结论
恭喜你！👏🏻你已经成功地编写了你的第一个Flutter应用程序：一个简单的Hello World应用。你学会了创建一个基本的Flutter应用程序结构，以及如何使用Dart语言构建用户界面。从这个简单的例子开始，你可以继续探索Flutter的更多功能和高级开发技巧，构建出丰富多样的移动应用程序。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。