#01 About Me

Flutter

結果展示

Google Drive

test_app.zip

功能需求

Text

title: Text('About Me')

Image

backgroundImage: AssetImage('assets/neve.jpg'),

Image.asset(
  'assets/flower.png', // 圖片來源
  width: 150, // 圖片寬度
  height: 150, // 圖片高度
),

Icon

Icon(
  Icons.cake, // 使用 cake 圖標
  color: const Color.fromARGB(255, 122, 118, 118), // 設置圖標顏色
),

Column

child: Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    PIC(), // 顯示個人圖片
    R(), // 顯示個人資訊區塊
    NAME(), // 顯示姓名和職業
    Transform.translate(
      offset: Offset(20, -380), // 調整Divider的位置
      child: SizedBox(
        width: 350,
        child: Divider(
          height: 5.0, // Divider高度
          color: Colors.white, // Divider顏色
        ),
      ),
    ),
    BHD(), // 顯示生日日期
    MOTTO(), // 顯示座右銘
    INTEREST(), // 顯示興趣
    INPIC(), // 顯示興趣圖片
    P(), // 顯示照片牆
  ],
),

Row

child: Row(
  children: <Widget>[
    Icon(
      Icons.cake, // 使用 cake 圖標
      color: const Color.fromARGB(255, 122, 118, 118), // 設置圖標顏色
    ),
    SizedBox(width: 10.0), // 空白間距
    Text(
      '2002/10/08', // 文字部分，顯示生日日期
      style: TextStyle(
        color: Colors.amberAccent[200], // 設置文字顏色
        fontSize: 20.0, // 設置字體大小
        letterSpacing: 2.0, // 設置字距
      ),
    )
  ],
),

Color

backgroundColor: Color.fromARGB(255, 188, 160, 201), // 設置背景顏色

color: Color.fromARGB(255, 183, 198, 249),

Stack

return Stack(
  children: [
    // 圓形容器
    Container(
      width: 170,
      height: 170,
      decoration: BoxDecoration(
        shape: BoxShape.circle, // 設置形狀為圓形
        color: Color.fromARGB(255, 183, 198, 249), // 設置背景顏色
      ),
    ),
    // 正方形容器
    Positioned(
      right: 100, // 設置位置
      child: Container(
        width: 170,
        height: 170,
        color: Color.fromARGB(255, 183, 198, 249), // 設置背景顏色
      ),
    ),
    // 顯示圓形頭像
    Positioned(
      left: 20, // 設置位置
      top: 15, // 設置位置
      child: CircleAvatar(
        backgroundImage: AssetImage('assets/neve.jpg'), // 設置圖像來源
        radius: 70.0, // 設置半徑
      ),
    ),
  ],
);

SingleChildScrollView (畫面可以上下及左右捲動)

child: SingleChildScrollView(
  scrollDirection: Axis.vertical, // 垂直滾動
  padding: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0), // 內邊距設置
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      PIC(), // 顯示個人圖片
      R(), // 顯示個人資訊區塊
      NAME(), // 顯示姓名和職業
      Transform.translate(
        offset: Offset(20, -380), // 調整Divider的位置
        child: SizedBox(
          width: 350,
          child: Divider(
            height: 5.0, // Divider高度
            color: Colors.white, // Divider顏色
          ),
        ),
      ),
      BHD(), // 顯示生日日期
      MOTTO(), // 顯示座右銘
      INTEREST(), // 顯示興趣
      INPIC(), // 顯示興趣圖片
      P(), // 顯示照片牆
    ],
  ),
),

child: SingleChildScrollView(
  scrollDirection: Axis.horizontal, // 水平滾動
  child: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 10.0),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.only(right: 10.0),
          child: Image.asset(
            'assets/moviee.png', // 圖片來源
            width: 100, // 圖片寬度
            height: 100, // 圖片高度
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(right: 10.0),
          child: Image.asset(
            'assets/travell.png', // 圖片來源
            width: 100, // 圖片寬度
            height: 100, // 圖片高度
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(right: 10.0),
          child: Image.asset(
            'assets/cameraa.png', // 圖片來源
            width: 100, // 圖片寬度
            height: 100, // 圖片高度
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(right: 10.0),
          child: Image.asset(
            'assets/muu.png', // 圖片來源
            width: 80, // 圖片寬度
            height: 80, // 圖片高度
          ),
        ),
        Image.asset(
          'assets/cat.png', // 圖片來源
          width: 110, // 圖片寬度
          height: 110, // 圖片高度
        ),
      ],
    ),
  ),
),

定義多個 stateless widget 類別

class HomePage extends StatelessWidget {
  const HomePage({super.key});

class PIC extends StatelessWidget {
  const PIC({super.key});

class NAME extends StatelessWidget {
  const NAME({super.key});

class R extends StatelessWidget {
  const R({super.key});

class AGE extends StatelessWidget {
  const AGE({super.key});

class STAR extends StatelessWidget {
  const STAR({super.key});

class BLOOD extends StatelessWidget {
  const BLOOD({super.key});

class BHD extends StatelessWidget {
  const BHD({super.key});

class MOTTO extends StatelessWidget {
  const MOTTO({super.key});

class INTEREST extends StatelessWidget {
  const INTEREST({super.key});

class INPIC extends StatelessWidget {
  const INPIC({super.key});

class P extends StatelessWidget {
  const P({super.key});

加分功能

Container

// 圓形容器
Container(
  width: 170,
  height: 170,
  decoration: BoxDecoration(
    shape: BoxShape.circle, // 設置形狀為圓形
    color: Color.fromARGB(255, 183, 198, 249), // 設置背景顏色
  ),
),
// 正方形容器
Positioned(
  right: 100, // 設置位置
  child: Container(
    width: 170,
    height: 170,
    color: Color.fromARGB(255, 183, 198, 249), // 設置背景顏色
  ),

child: Container(
  decoration: BoxDecoration(
    color: Color.fromARGB(255, 199, 211, 251), // 背景色設定
    borderRadius: BorderRadius.circular(20), // 圓角設定
  ),
  width: 150, // 容器寬度
  height: 400, // 容器高度
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Transform.translate(
        offset: Offset(30, 40), // 平移偏移量
        child: AGE(), // 呼叫 AGE Widget
      ),
      Transform.translate(
        offset: Offset(30, 60), // 平移偏移量
        child: STAR(), // 呼叫 STAR Widget
      ),
      Transform.translate(
        offset: Offset(30, 80), // 平移偏移量
        child: BLOOD(), // 呼叫 BLOOD Widget
      ),
    ],
  ),
),

Padding

padding: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0), // 內邊距設置

child: Padding(
  padding: const EdgeInsets.symmetric(horizontal: 10.0),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.only(right: 10.0),
        child: Image.asset(
          'assets/moviee.png', // 圖片來源
          width: 100, // 圖片寬度
          height: 100, // 圖片高度
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(right: 10.0),
        child: Image.asset(
          'assets/travell.png', // 圖片來源
          width: 100, // 圖片寬度
          height: 100, // 圖片高度
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(right: 10.0),
        child: Image.asset(
          'assets/cameraa.png', // 圖片來源
          width: 100, // 圖片寬度
          height: 100, // 圖片高度
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(right: 10.0),
        child: Image.asset(
          'assets/muu.png', // 圖片來源
          width: 80, // 圖片寬度
          height: 80, // 圖片高度
        ),
      ),
      Image.asset(
        'assets/cat.png', // 圖片來源
        width: 110, // 圖片寬度
        height: 110, // 圖片高度
      ),
    ],
  ),
),

SizedBox

child: SizedBox(
  width: 350,
  child: Divider(
    height: 5.0, // Divider高度
    color: Colors.white, // Divider顏色
  ),
),

SizedBox(height: 5.0), // 空白間距

child: SizedBox(
  width: 220,
  height: 220,
  child: Image.asset('assets/a.jpg'), // 圖片來源
),

Stack

return Stack(
  children: [
    // 圓形容器
    Container(
      width: 170,
      height: 170,
      decoration: BoxDecoration(
        shape: BoxShape.circle, // 設置形狀為圓形
        color: Color.fromARGB(255, 183, 198, 249), // 設置背景顏色
      ),
    ),
    // 正方形容器
    Positioned(
      right: 100, // 設置位置
      child: Container(
        width: 170,
        height: 170,
        color: Color.fromARGB(255, 183, 198, 249), // 設置背景顏色
      ),
    ),
    // 顯示圓形頭像
    Positioned(
      left: 20, // 設置位置
      top: 15, // 設置位置
      child: CircleAvatar(
        backgroundImage: AssetImage('assets/neve.jpg'), // 設置圖像來源
        radius: 70.0, // 設置半徑
      ),
    ),
  ],
);

Positioned

// 正方形容器
Positioned(
  right: 100, // 設置位置
  child: Container(
    width: 170,
    height: 170,
    color: Color.fromARGB(255, 183, 198, 249), // 設置背景顏色
  ),
),
// 顯示圓形頭像
Positioned(
  left: 20, // 設置位置
  top: 15, // 設置位置
  child: CircleAvatar(
    backgroundImage: AssetImage('assets/neve.jpg'), // 設置圖像來源
    radius: 70.0, // 設置半徑
  ),
),

AppBar

appBar: AppBar(
  title: Text('About Me'), // 設置AppBar標題
  centerTitle: true, // 標題居中
  backgroundColor: Color.fromARGB(255, 216, 194, 215), // AppBar背景顏色
  elevation: 0.0, // 不顯示AppBar下陰影
),

SafeArea

body: SafeArea(
  child: SingleChildScrollView(
    scrollDirection: Axis.vertical, // 垂直滾動
    padding: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0), // 內邊距設置
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        PIC(), // 顯示個人圖片
        R(), // 顯示個人資訊區塊
        NAME(), // 顯示姓名和職業
        Transform.translate(
          offset: Offset(20, -380), // 調整Divider的位置
          child: SizedBox(
            width: 350,
            child: Divider(
              height: 5.0, // Divider高度
              color: Colors.white, // Divider顏色
            ),
          ),
        ),
        BHD(), // 顯示生日日期
        MOTTO(), // 顯示座右銘
        INTEREST(), // 顯示興趣
        INPIC(), // 顯示興趣圖片
        P(), // 顯示照片牆
      ],
    ),
  ),
),

Transform

Transform.translate(
  offset: Offset(30, 40), // 平移偏移量
  child: AGE(), // 呼叫 AGE Widget
),
Transform.translate(
  offset: Offset(30, 60), // 平移偏移量
  child: STAR(), // 呼叫 STAR Widget
),
Transform.translate(
  offset: Offset(30, 80), // 平移偏移量
  child: BLOOD(), // 呼叫 BLOOD Widget
),

Divider

Transform.translate(
  offset: Offset(20, -380), // 調整Divider的位置
  child: SizedBox(
    width: 350,
    child: Divider(
      height: 5.0, // Divider高度
      color: Colors.white, // Divider顏色
    ),
  ),
),

CircleAvatar

child: CircleAvatar(
  backgroundImage: AssetImage('assets/neve.jpg'), // 設置圖像來源
  radius: 70.0, // 設置半徑
),

ClipRRect

ClipRRect(
  borderRadius: BorderRadius.circular(20), // 圓角設定
  child: Container(
    decoration: BoxDecoration(
      color: Color.fromARGB(255, 199, 211, 251), // 背景色設定
      borderRadius: BorderRadius.circular(20), // 圓角設定
    ),
    width: 350, // 容器寬度
    height: 100, // 容器高度
    child: Transform.translate(
      offset: Offset(10, 10), // 平移偏移量
      child: Text(
        'If you can dream it, you can do it.', // 文字部分，顯示座右銘
        style: TextStyle(
            color: Color.fromARGB(255, 144, 116, 15), // 設置文字顏色
            letterSpacing: 1.0, // 設置字距
            fontSize: 28.0, // 設置字體大小
            fontWeight: FontWeight.bold), // 設置字體粗細
      ),
    ),
    //SizedBox(height: 30.0),
  ),
)

Align

crossAxisAlignment: CrossAxisAlignment.start,

Align(
  alignment: Alignment.topLeft,
  child: SizedBox(
    width: 220,
    height: 220,
    child: Image.asset('assets/a.jpg'), // 圖片來源
  ),
),

Wrap

Wrap with Padding

Padding(
  padding: const EdgeInsets.only(right: 10.0),
  child: Image.asset(
    'assets/travell.png', // 圖片來源
    width: 100, // 圖片寬度
    height: 100, // 圖片高度
  ),
),

Wrap with SizedBox

SizedBox(
  width: 220,
  height: 220,
  child: Image.asset('assets/a.jpg'), // 圖片來源
),

Wrap with Container

Container(
  decoration: BoxDecoration(
    color: Color.fromARGB(255, 199, 211, 251), // 背景色設定
    borderRadius: BorderRadius.circular(20), // 圓角設定
  ),
  width: 350, // 容器寬度
  height: 100, // 容器高度
  child: Transform.translate(
    offset: Offset(10, 10), // 平移偏移量
    child: Text(
      'If you can dream it, you can do it.', // 文字部分，顯示座右銘
      style: TextStyle(
          color: Color.fromARGB(255, 144, 116, 15), // 設置文字顏色
          letterSpacing: 1.0, // 設置字距
          fontSize: 28.0, // 設置字體大小
          fontWeight: FontWeight.bold), // 設置字體粗細
    ),
  ),
  //SizedBox(height: 30.0),
),

Wrap with Positioned

Positioned(
  right: 100, // 設置位置
  child: Container(
    width: 170,
    height: 170,
    color: Color.fromARGB(255, 183, 198, 249), // 設置背景顏色
  ),
),