【Flutter 跨平台 App 程式設計入門】#01 打造吸睛的 About 頁面

github連結：

GitHub - cy1227/Flutter_HW1 at master

介紹主題 ：南韓歌手田柾國

頁面預覽

使用到的widget

• Text & Color

                  Text(
                    'Jungkook : ',
                    style: TextStyle(
                      fontSize: 30.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),

• Image

          Image.network(
            'https://i.beauty321.com/812x/https://il.beauty321.com/gallery/gallery/58377/photo-6544a45730553.webp',
            width: 360,
            height: 360,
            fit: BoxFit.cover,
          ),

• Stack & Positioned & Icon

Stack(
      children: [
        Image.network(
          url,
          width: 100,
          height: 100,
        ),
        Positioned(
          top: 3,
          left: 0,
          child: Icon(Icons.favorite, color: Colors.red), 
        ),
        Positioned(
          bottom: 0,
          left: 3,
          child: Text(
            name,
            style: TextStyle(
              color: textColor,
              fontSize: 12,
            ),
          ),
        ),
      ],
    );

• Column & Row & Padding & Center

Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Center(
           ...
          ),
          Padding(
            padding: EdgeInsets.all(20),
            child: Row(
              children: [
                ...
              ],
            ),
          ),
        ],
      ),

• SingleChildScrollView & Container

SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: 360,
              child: Padding(
                padding: EdgeInsets.only(left: 20, right: 20),
                child: Text(
                   ...
                  textAlign: TextAlign.justify,
                ),
              ),
            ),
          ],
        ),
      ),

• Divider

              Divider(
                color: Colors.grey[800],
                height: 20.0,
              ),

• appBar

      appBar: AppBar(
        title: Text('Introduction of Jungkook',
            style: TextStyle(color: Colors.white)),
        backgroundColor: Color.fromARGB(255, 67, 20, 118),
      ),

• sizedBox

              SizedBox(height: 15.0),

• 定義自己的widget並傳遞參數

class MyImage extends StatelessWidget {
  final String url, name;
  final Color textColor;

  MyImage({required this.url, required this.name, required this.textColor});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Image.network(
          url,
          width: 100,
          height: 100,
        ),
        Positioned(
          bottom: 0,
          left: 3,
          child: Text(
            name,
            style: TextStyle(color: textColor, fontSize: 12),
          ),
        ),
      ],
    );
  }
}

心得

第一次寫跟app有關的東西蠻有趣的，可惜還有其他科的作業要寫沒辦法自己多查更多新功能，比較不習慣的地方是樣式都要寫在裡面不能拉出來單獨寫，讓程式碼看起來很長又很雜亂。