3

用 vscode 创建第一个 flutter 项目

 3 years ago
source link: https://www.techug.com/post/create-the-first-shuttle-project-with-vscode.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

 大家好，我是坚果，我的公众号“坚果前端”，

img16371096071999785104.gif

今天教大家

用 vscode 创建第一个项目

创建新项目

在安装了 Flutter 扩展的 VS Code 中，通过选择 View ▸ Command Palette…或在 macOS 上按 Command-Shift-P 或在 Linux 或 Windows 上按 Control-Shift-P 打开命令面板。在面板中输入 Flutter: New 并按 Return。

默认第一个。直接按 return

这个时候选择一个文件夹创建。

然后返回这个界面。给自己的项目命名。

这个就是创建后的项目结构

运行-启动调试

我没有连真机，所以显示的是我安装的浏览器

然后直接运行，VSCode 只需要按 F5 快捷键就行了。

然后你就可以看到 VSCode 弹出一个框让你选择运行项目的环境：

老铁，听我说，选 “ Dart & Flutter ” 就对了。

然后稍等一下吧，项目会编译，然后自动生成内容，其实就是 Dart 转换成 JavaScript 的过程。

Dart 原本就是（谷歌）想代替 JavaScript 而发明的，可以转换成 JavaScript 代码。

感觉 Dart 走了曲线救国的方式，终于走到这步 —— 代替 JavaScript。

最后，你会看到你系统默认的浏览器会弹出一个新的窗口来运行你的项目。（感觉刚开始有点慢吧。。。。）

下面我们来看看项目的目录：

web/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>

web/main.dart

// Copyright 2019 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter_web_ui/ui.dart' as ui;
import 'package:aaaaaaa/main.dart' as app;


main() async {
  await ui.webOnlyInitializePlatform();
  app.main();
}

lib/main.dart

import 'package:flutter_web/material.dart';


void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}


class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;


  @override
  Widget build(BuildContext context) {
    // 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.
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also 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.
          //
          // Invoke "debug painting" (choose the "Toggle Debug Paint" action
          // from the Flutter Inspector in Android Studio, or the "Toggle Debug
          // Paint" command in Visual Studio Code) to see the wireframe for each
          // widget.
          //
          // 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: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello, World!',
            ),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

本文就大致介绍到这里吧，不管怎么说 Flutter 跑在 Web 上面而且不是试验性质的，是正式版的，这是令人多么激动无比啊，我也情不自禁为其写下一篇相关文章。

本文文字及图片出自 InfoQ


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK