flutter - 04 入門基礎知識

Flutter入門基礎知識

• 如何建立Flutter項目?
• 如何運作Flutter項目?
• 如何導入Widget?
• 如何寫一個Helloworld?
• 如何使用Widget并将其嵌套以形成Widget樹?
• 如何建立可重用Widget?

如何建立Flutter項目?

要建立一個Flutter項目有以下兩種方式：

從指令行使用flutter create指令。確定Flutter SDK配置了環境變量。

~ flutter create projectflutter      

建立完成提示下面内容

In order to run your application, type:

  $ cd projectflutter
  $ flutter run

Your application code is in projectflutter/lib/main.dart.      

運作 flutter run

➜  cd projectflutter 
➜  projectflutter flutter run
Launching lib/main.dart on xxxx in debug mode...
 
Signing iOS app for device deployment using developer identity: "Apple
Development: xxxxxxxx (22222222)"
Running Xcode build...                                                  
                                                   
 └─Compiling, linking and signing...                        84.3s
Xcode build done.                                           114.0s                                                                      
Installing and launching...                                        63.0s

➜  projectflutter flutter run
Launching lib/main.dart on xxxx in debug mode...
 
Signing iOS app for device deployment using developer identity: "Apple
Development: xxxxxxxx (22222222)"
Running Xcode build...                                                  
                                                   
 └─Compiling, linking and signing...                         8.5s
Xcode build done.                                           17.5s
Installing and launching...                                        22.2s
Waiting for xxxx to report its views...                                5ms
Syncing files to device xxxx...                                           
(This is taking an unexpectedly long time.)      

使用安裝了Flutter和Dart插件的IDE。

如何運作Flutter項目?

在Flutter中， 通過以下兩種方式來運作項目：

• 從項目的根目錄使用flutter run。
• 在帶有Flutter和Dart插件的IDE中使用​

  ​run​

  ​​ 選項。

  $flutter run-d ‘iPhone X’

  -d 後面跟的是具體的裝置名稱， 可以是Android或iOS模拟器的名字，也可以一台已經連接配接到電腦上的Android或iOS的裝置。

如何導入Widget?

在Flutter中， 要使用​

​Material Design​

​​庫中的小部件， 則需要導入​

​material.dart​

​​包。要使用iOS樣式widget， 請導入​

​Cupertino​

​庫。要使用更基本的視窗widget集，請導widget庫。或者， 當然， 也可以導入自己編寫的widget：

import 'package：flutter/material.dart';//導入系統materialwidget庫
import 'package：flutter/cupertino.dart';
import 'package：flutter/widgets.dart';
import 'package：flutter/my_widgets.dart';//導入自己的widget      

無論您導入哪個widget包， Dart都隻會導入在您的應用中使用的widget。

如何寫一個Helloworld?

在Flutter中， 您可以建立一個完全相同的​

​Helloworld!​

​應用程式使用核心視窗小部件庫中的Center視窗小部件成為視窗小部件樹的根， 并且有一個子視窗， 即“Text”視窗小部件：

import 'package:flutter/material.dart';

void main() {
  runApp(
    Center(
      child: Text(
        'Hello World',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}      

如何使用Widget并将其嵌套以形成Widget樹?

在Flutter中， 幾乎所有東西都是widget。

widget是使用者界面的基本建構塊， 您将widget組成一個層次結構， 調用widget樹。每個視窗widget都嵌套在父視窗widget中， 并從其父視窗繼承屬性。甚至應用程式對象本身也是一個元件， 沒有單獨的“應用程式”對象。相反， 根widget擔任此角色。

Widget可以定義：

• 結構元素 - 如按鈕或菜單
• 文體元素 - 像字型或顔色主題
• 類似布局的填充或對齊的一個方向

以下示例使用​

​Material​

​庫中的Widget顯示”Helloworld!”應用程式。在此示例中， widget樹嵌套在Material App的根widget中。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "Hello Flutter ",
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            "hello appBar",
          ),
        ),
        body: Center(
          child: Text(
            "hello body",
            textDirection: TextDirection.ltr,
          ),
        ),
      ),
    );
  }
}      

以下圖檔顯示了使用Material Design小部件建構的“Helloworld!”。

如何建立可重用的Widget?

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  var index = 10;
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "Hello Flutter ",
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            "hello appBar",
          ),
        ),
      body: CustomCard(index: index, onPress:(){
        print('Card $index');
      }),
      ),
    );
  }
}


class CustomCard extends StatelessWidget {

  CustomCard({@required this.index, @required this.onPress});

  final index;
  final Function onPress;
  
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: [
          Text('Card $index'),
          FlatButton(onPressed: this.onPress, child: const Text('Press'))
        ],
      ),
    );
  }
}