處理文字
- 使用 Text 類別設定文字,第一個參數是一個字串,後面是屬性設定
- 使用 style: TextStyle() 設定文字屬性,TextStyle裡可以放置元素如下
- fontSize:14 字體大小,預設14
- color 文字顏色,可用 Color(0xAARRGGBB) 或 Colors.blue 表示
- decoration 文字加線條
- decoration: TextDecoration.underline 加入底線
- decoration: TextDecoration.lineThrough 加入刪除線
- decoration: TextDecoration.overline 文字上方加一條線
- fontWeight
- fontWeight: FontWeight.normal
- fontWeight: FontWeight.bold
- fontWeight: FontWeight.w100 - w900 w100最細,w900最粗
- backgroundColor
- 使用 textAlign 設定對齊方式
- textAlign: TextAlign.left
- textAlign: TextAlign.right
- textAlign: TextAlign.center
- textAlign: TextAlign.justify (左右兩端對齊)
- 使用 maxLines 限制最多幾行。沒設定的話會自動調整;有設置的話,超過的部份會被隱藏
處理圖片
- 在專案資料夾,增加一個 assets 資料夾,並且將圖片存入
- 在 pubspec.yaml 檔案中,尋找 flutter: 段落,在其下加入 assets: 後,將圖片路徑加上去
- 使用 var img = Image.asset('assets/flutter.png') or Image.network('https://google.com/logo.png') 指定圖片物件
- 放到 appbody 的 child 中
圖片屬性
- scale 改變圖片大小,作用為倒數分之一
- width
- height
- fit
- fit: BoxFit.fill 填滿整個空間
- fit: BoxFit.contain 維持原來大小
- fit: BoxFit.cover 保持寬高比,並讓影像填滿空間,超出部份會被裁掉
- fit: BoxFit.fitWidth 保持寬高比,並讓影像填滿空間的寬度,高度可能會被裁掉或留白
- fit: BoxFit.fitHeight 保持寬高比,並讓影像填滿空間的高度,寬度可能會被裁掉或留白
範例程式碼
import 'package:flutter/material.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
//在 Text的 style中,可以指定color, decoration, fontweight textalign
var appTitle = Text('first flutter app'),
hiFlutter = Text(
'Hi, Flutter',
style: TextStyle(fontSize: 30,
color: Colors.blue,
decoration: TextDecoration.underline,
fontWeight: FontWeight.bold,),
textAlign: TextAlign.center,
);
//可以用 Image.asset or Image.network 取得圖片
//var img = Image.asset('assets/2022_0630_141314.jpg');
var img = Image.network('https://www.google.com.tw/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png',
//scale: 2,
//width: 200,
//height: 500,
fit: BoxFit.cover,
);
var appBody = Center(
child: img,
);
var appBar = AppBar(
title: appTitle,
backgroundColor: Color(0xffff0000),
);
var app = MaterialApp(
home: Scaffold(
appBar: appBar,
body: appBody,
backgroundColor: Colors.yellow,
),
);
return app;
}
}