Posts
Flutter - Container class
Flutter 的 Container widget 是能用來繪製、設定位置/尺寸的容器 widget。
其建構子如下:
Container({Key key, AlignmentGeometry alignment, EdgeInsetsGeometry padding, Color color, Decoration decoration, Decoration foregroundDecoration, double width, double height, BoxConstraints constraints, EdgeInsetsGeometry margin, Matrix4 transform, Widget child }) 屬性如下:
Name Type Description alignment AlignmentGeometry Align the child within the container. child Widget The child contained by the container. constraints BoxConstraints Additional constraints to apply to the child. decoration Decoration The decoration to paint behind the child. foregroundDecoration Decoration The decoration to paint in front of the child.
read morePosts
Flutter - Center widget
Flutter 的 Center widget 可用來做置中的呈現。
其建構子如下:
Center({Key key, double widthFactor, double heightFactor, Widget child }) 屬性如下:
Name Type Description alignment AlignmentGeometry How to align the child. child Widget The widget below this widget in the tree. hashCode int The hash code for this object. heightFactor double If non-null, sets its height to the child’s height multiplied by this factor. key Key Controls how one widget replaces another widget in the tree.
read morePosts
Flutter - List all connected devices with flutter CLI
要使用 Flutter CLI 列出所有連接的裝置,可以調用下列命令。
Flutter devices 命令調用後會顯示所有連接的裝置。
這命令可用來確認裝置的連接狀態,如果同時有多個裝置連接,我們也可以用這命令確認裝置的識別碼,用以指定運行到特定的裝置。
read morePosts
Flutter - Run flutter app with flutter CLI
要使用 Flutter CLI 運行 Flutter app,可以調用下列命令。
Flutter run 命令調用後會顯示運行時可供使用的功能。
且 Flutter app 會被運行起來。
Flutter app 運行的當中我們可以開啟 http://127.0.0.1:8101,進行 Flutter app 的 profiling。
如果開發中要進行 app 的重載,可以使用 r 進行 hot reload,或是按下 R 進行 app 的重載。
像是這邊筆者將正在運行中的程式做個簡單的修改。
按下 R 將 app 重載,Flutter 只花了 748 ms 就完成了重載的動作。
如果要查看更多支援的操作,可以按下 h,會將更進階操作功能顯示出來。
像是按下 w 可以看到 app 的 widget 的階層架構。
按下 t 可以看到 app 的 rendering tree。
按下 L 可以查看 app 的 layout。
按下 p 可以顯示 construction lines。
按下 s 可以擷取畫面。
read morePosts
Flutter - Text widget
Flutter 的 Text widget 可以用來做簡易的文字顯示。
其建構子如下:
Text(String data, { Key key, TextStyle style, TextAlign textAlign, TextDirection textDirection, bool softWrap, TextOverflow overflow, double textScaleFactor, int maxLines }) 屬性如下:
Name Type Description data String The text to display. maxLines int An optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to overflow. overflow TextOverflow How visual overflow should be handled.
read morePosts
Flutter - Hello world
Flutter 專案建立後可以先撰寫個簡單的 Hello world 程式,lib/main.dart 為 Flutter 程式的主要進入點,將之開啟後撰寫如下程式。
import 'package:flutter/material.dart'; void main() { runApp( new Center( child: new Text( 'Hello, world!', textDirection: TextDirection.ltr, ), ), ); } 可以看到 Flutter 程式撰寫上主要有幾個要注意的部分,首先需引用 flutter/material.dart 套件。
import 'package:flutter/material.dart'; 再來就是要在 main 這個處函式內調用 runApp 方法,runApp 方法調用時要帶入構成畫面的 widget。
void main() { runApp(...); } 像是這邊的範例就帶入了一個 Center 的 Widget,Center 的 Widget 內又放置了一個 Text Widget,所以 Text Widget 設定的字串會在程式的正中央顯示。
read morePosts
Flutter - Getting started with VS Code
要在 VS Code 運行 Flutter,需先安裝 Dart Code 套件。
安裝完後重啟 VS Code。
使用 Command Palette 調用 Flutter: New Project。
輸入 Flutter 專案名稱(專案的名稱必須要全小寫)後按下 Enter 建繼續。
選取專案要放置的位置。
Flutter 專案即會被建立在指定的位置。
接著進行除錯上的設定。
點選 Open launch.json,VS Code 會幫我們自動產生對應的 launch.json 檔。
點選 Start Debugging 按鈕。
即會進入 Flutter 專案的除錯。
Link Get Started: Configure Editor - Flutter Get Started: Test Drive - Flutter
read morePosts
Flutter - Examples
Flutter 安裝目錄下的 examples 目錄附有一些 Flutter 的範例程式,學習時可先從這邊下手。
可先調用命令將範例運行起來操作看看,再對照看程式是怎麼撰寫的。
flutter run 若是將 hello_world 範例運行起來,會看到…
運行 platform_view…
運行 catalog…
運行 stocks…
運行 flutter_gallery…
運行 platform_channel…
運行 flutter_view…
read morePosts
Flutter - Install on macOS
要在 Mac 中使用 Flutter,首先要先用 Git 將 Flutter 抓取下來。
git clone -b beta https://github.com/flutter/flutter.git 然後設定 Flutter 路徑參考,可以在 Terminal 直接輸入設定。
export PATH=[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH 也可以開啟 HOME/.bash_profile 修改,加入上述設定,然後調用下面命令重新讀取設定值。
source $HOME/.bash_profile 設定好後調用下面命令,檢驗環境中所缺少的依賴。
flutter doctor 運行完可以看到缺少的依賴有哪些,且會很詳細的顯示該怎麼處理,接著只要照著指示反覆將缺少的依賴修正即可。
Link Get Started: Install on macOS - Flutter
read morePosts
Jenkins - Categorized Jobs View Plugin
Jenkins 的 Categorized Jobs View 套件可用來分類整理 Jenkins job,允許指定多個不同的分類 Rule,View 內的 Job 會依照指定的 Rule 進行分類。
要使用 Categorized Job View,可先到外掛程式管理這邊搜尋 Categorized Jobs View 套件,下載並安裝。
安裝完建立一個新的 View。
選取剛安裝的 Categorized Jobs View。
勾選加入要在這 View 看到的 Job。
並設定 Grouping rule 。
回到剛新加的 View,即會看到 Job 依照 Grouping rule 進行了分類。
read more