前言

1、Flutter是Google使用Dart語言開發的移動應用開發框架，使用一套Dart代碼就能構建高性能、高保真的iOS和Android應用程序，并且在排版、圖標、滾動、點擊等方面降低差異。
2、Flutter不是黑科技，應用程序的代碼總是以一種非常合理，可以解釋的方式的運行著，只是需要去了解而已。Flutter能夠在iOS和Android上運行起來，依靠的是一個叫Flutter Engine的虛擬機，Flutter Engine是Flutter應用程序的運行環境，開發人員可以通過Flutter框架和API在內部進行交互
3、Flutter的優勢（1）高效率 用一套代碼庫就能開發iOS和Android應用;使用新型的、表現力強的語言和聲明式的方法，用更少的代碼來做更多的事情;開發調試更容易方便 ,可以在應用程序運行時更改代碼并重新加載查看效果，也就是熱重新加載
（2）創建美觀、高度定制的用戶體驗 ,Flutter框架內置了一組豐富的質感設計控件

內容

一、全世界的第一個簡單的輸出小李子：

import 'package:flutter/material.dart'; void main() { runApp(new Center(child: new Text('你好，靈機！', textDirection: TextDirection.ltr))); } 

二、基礎控件：
<一>、簡單控件：

1. Text控件即容器，是一個常用的控件，下面的實例有7個不同樣式的文本控件

class ContainerDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('文本控件'), ), body: new Column( children: <Widget>[ new Text( '紅色+黑色刪除線+25號', style: new TextStyle( color: const Color(0xffff0000), decoration: TextDecoration.lineThrough, decorationColor: const Color(0xff000000), fontSize: 25.0, ), ), new Text( '橙色+下劃線+24號', style: new TextStyle( color: const Color(0xffff9900), decoration: TextDecoration.underline, fontSize: 24.0, ), ), new Text( '虛線上劃線+23號+傾斜', style: new TextStyle( decoration: TextDecoration.overline, decorationStyle: TextDecorationStyle.dashed, fontSize: 23.0, fontStyle: FontStyle.italic, ), ), new Text( 'serif字體+24號', style: new TextStyle( fontFamily: 'serif', fontSize: 26.0, ), ), new Text( 'monospace字體+24號+加粗', style: new TextStyle( fontFamily: 'monospace', fontSize: 24.0, fontWeight: FontWeight.bold, ), ), new Text( '天藍色+25號+2行跨度', style: new TextStyle( color: const Color(0xff4a86e8), fontSize: 25.0, height: 2.0, ), ), new Text( '24號+2個字母間隔', style: new TextStyle( fontSize: 24.0, letterSpacing: 2.0, ), ), ] ), ); } } void main() { runApp( new MaterialApp( title: 'Flutter教程', home: new ContainerDemo(), ), ); } 

2. Image控件即圖片控件，是顯示圖像的控件，Image控件有多種構造函數：

(1)new Image，用于從ImageProvider獲取圖像。
(2) new Image.asset，用于使用key從AssetBundle獲取圖像。
(3) new Image.network，用于從URL地址獲取圖像。
(4) new Image.file，用于從File獲取圖像。

下面是一個從URL地址獲取圖像的實例，并通過scale屬性設置縮放比例：

import 'package:flutter/material.dart'; class ImageDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('從URL地址獲取圖像'), ), body: new Center( child: new Image.network( 'http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg', scale: 2.0, ), ), ); } } void main() { runApp( new MaterialApp( title: 'Flutter教程', home: new ImageDemo(), ), ); } 

下面是一個從本地文件目錄中獲取圖像的實例：

class ImageDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('從本地獲取圖像'), ), body: new Center( child: new Container( decoration: new BoxDecoration( backgroundImage: new BackgroundImage( image: new AssetImage('images/flutter.jpeg'), ), ) ) ), ); } }void main() { runApp( new MaterialApp( title: 'Flutter教程', home: new ImageDemo(), ), ); } 

<二>內容布局：
1.水平布局
Row控件即水平布局控件，能夠將子控件水平排列

import 'package:flutter/material.dart'; class LayoutDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('水平方向布局'), ), body: new Row( children: <Widget>[ new RaisedButton( onPressed: () { print('點擊紅色按鈕事件'); }, color: const Color(0xffcc0000), child: new Text('紅色按鈕'), ), new Flexible( flex: 1, child: new RaisedButton( onPressed: () { print('點擊黃色按鈕事件'); }, color: const Color(0xfff1c232), child: new Text('黃色按鈕'), ), ), new RaisedButton( onPressed: () { print('點擊粉色按鈕事件'); }, color: const Color(0xffea9999), child: new Text('粉色按鈕'), ), ] ), ); } } void main() { runApp( new MaterialApp( title: 'Flutter教程', home: new LayoutDemo(), ), ); } 

2.垂直布局
Column控件即垂直布局控件，能夠將子控件垂直排列

import 'package:flutter/material.dart'; class LayoutDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('垂直方向布局'), ), body: new Column( children: <Widget>[ new RaisedButton( onPressed: () { print('點擊紅色按鈕事件'); }, color: const Color(0xffcc0000), child: new Text('紅色按鈕'), ), new Flexible( flex: 1, child: new RaisedButton( onPressed: () { print('點擊黃色按鈕事件'); }, color: const Color(0xfff1c232), child: new Text('黃色按鈕'), ), ), new RaisedButton( onPressed: () { print('點擊粉色按鈕事件'); }, color: const Color(0xffea9999), child: new Text('粉色按鈕'), ), ] ), ); } } void main() { runApp( new MaterialApp( title: 'Flutter教程', home: new LayoutDemo(), ), ); } 

3.Stack即層疊布局控件，能夠將子控件層疊排列
Stack控件的每一個子控件都是定位或不定位，定位的子控件是被Positioned控件包裹的。Stack控件本身包含所有不定位的子控件，其根據alignment定位（默認為左上角）。然后根據定位的子控件的top、right、bottom和left屬性將它們放置在Stack控件上。

import 'package:flutter/material.dart'; class LayoutDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('層疊定位布局'), ), body:new Center( child: new Stack(children: <Widget>[new Image.network('http://img2.cxtuku.com/00/13/12/s97783873391.jpg'),new Positioned(left: 35.0,right: 35.0,top: 45.0,child: new Text('Whatever is worth doing is worth doing well. ???.???',style: new TextStyle(fontSize: 20.0,fontFamily: 'serif',),),),]), ), ); } } void main() { runApp( new MaterialApp( title: 'Flutter教程', home: new LayoutDemo(), ), ); } 

4.Container控件即容器，是一個常用的控件，基礎容器的實例

import 'package:flutter/material.dart'; class ContainerDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Center( child: new Container( width: 128.0, height: 128.0, decoration: new BoxDecoration( color: Colors.lightBlueAccent[100], ), ), ); } } void main() { runApp( new MaterialApp( title: 'Flutter教程', home: new ContainerDemo(), ), ); } 

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.webpost.com.cn/17749.html