IDEA安装Flutter之基础知识

admin管理员组

文章数量:1545424

这一章我们重点阐述Flutter的一些安装以及基础知识，在MAC上进行部署等;

macOS 安装Flutter

https://docs.flutter.dev/get-started/install/macos

IDEA创建第一个Flutter项目应用程序

https://docs.flutter.dev/get-started/test-drive

在Flutter项目中cd到项目，添加MACOS运行

1、进入项目中、执行以下命令。具体需要的环境根据自己需求添加。

flutter create --platforms=windows,macos,linux .

2、在macos桌面运行。 

flutter run -d macos

1.要更新 Flutter SDK，请使用以下flutter upgrade命令：

$ flutter upgrade

2.Flutter 有四个发布渠道： stable、beta、dev和master。我们建议使用稳定频道，除非您需要更新的版本。

要查看您当前的频道，请使用以下命令：

$ flutter channel

3.要更改为另一个频道，请使用flutter channel 。更改频道后，请使用flutter upgrade 下载 Flutter SDK 和依赖包。例如：

$ flutter channel dev
$ flutter upgrade

注意： 如果您需要特定版本的 Flutter SDK，您可以从Flutter SDK 版本下载

4.运行以下命令以生成发布版本：

$ flutter build web

5.要将 Web 支持添加到使用以前版本的 Flutter 创建的现有项目，请从项目目录运行以下命令：

flutter create .

6.如果IDEA左侧没有Flutter框架选项;IDEA安装Flutter框架
File -> Setting 打开 IDEA 设定的界面
Flutter 插件用来支撑Flutter开发者的流程（运行，调试，热加载，等等）
Dart插件则提供代码分析（代码合法性校验，代码补全等等）


7.检查是否需要依赖项

$ flutter doctor

二：创建Flutter第一个程序

1.在pubspec.yaml文件中导入外部框架

  cupertino_icons: ^1.0.2
  english_words: ^4.0.0
  pull_to_refresh: ^1.1.5

2.新建flutter项目后，看目录–>main.dart：

import 'package:flutter/material.dart';
import 'package:radiancewebflutter/RandomWords.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return new MaterialApp(
      title: 'Welcome to Flutter',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home:new RandomWords(),
    );
  }
}

3.RandomWords.dart

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}


class RandomWordsState extends State<RandomWords> {
  @override

  final _suggestions = <WordPair>[];

  final _saved = Set<WordPair>();

  final _biggerFont = const TextStyle(fontSize: 18.0);

  Widget _buildSuggestions() {
    return new ListView.builder(
        padding: const EdgeInsets.all(16.0),

        itemBuilder: (context, i) {
     
          if (i.isOdd) return new Divider();
          
          final index = i ~/ 2;
         
          if (index >= _suggestions.length) {
            
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);
        }
    );
  }


  Widget _buildRow(WordPair pair) {

    final alreadySaved = _saved.contains(pair);

    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: new Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),
      onTap: (){
        setState(() {
          if (alreadySaved){
            _saved.remove(pair);
          }else{
            _saved.add(pair);
          }
        });
      },
    );
  }



  Widget build(BuildContext context) {
    return new Scaffold (
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
        actions: <Widget>[
          new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved),
        ],
      ),
      body: _buildSuggestions(),
    );
  }

  void _pushSaved() {
    Navigator.of(context).push(
        new MaterialPageRoute(
            builder: (BuildContext context) {
              final tiles = _saved.map(
                    (pair) {
                  return new ListTile(
                    title: new Text(
                      pair.asPascalCase,
                      style: _biggerFont,
                    ),
                  );
                },
              );
              final divided = ListTile
                  .divideTiles(
                context: context,
                tiles: tiles,
              )
                  .toList();
              return new Scaffold(
                appBar: new AppBar(
                  title: new Text('Saved Suggestions'),
                ),
                body: new ListView(children: divided),
              );
        },

        ),
    );
  }
}

3.运行程序看效果

点击右上角进行切换导航栏到下一页(读取到选择的列表数据)

本文标签： 基础知识IDEAFlutter