【Flutter 開發】#1 打造吸睛的 About 頁面

皮卡~皮卡!丘~~~

展示畫面

介紹程式:

• 主頁面的 appbar ( Text, Color )

AppBar(
  title: const Text('皮卡丘'),
  centerTitle: true,
  backgroundColor: Colors.grey[850],
  foregroundColor: Colors.white,
)

• 主頁面的 body ( BoxDecoration, Divider, Stack, SingleChildScrollView )

Container(
  margin: const EdgeInsets.all(15),
  padding: const EdgeInsets.all(5),
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.black45,
      width: 5.0,
    ),
    borderRadius: BorderRadius.circular(20),
    boxShadow: const [
      BoxShadow(blurRadius: 10),
    ],
    color: Colors.white,
  ),
  child: const Stack(
    children: [
      SingleChildScrollView(
        padding: EdgeInsets.all(5),
        scrollDirection: Axis.vertical,
        child: Column(
          children: [
            Pikachu(),
            Divider(
              thickness: 2,
              height: 10,
              indent: 30,
              endIndent: 30,
            ),
            PikachuDescription(),
            SizedBox(height: 16),
            AnimatedPikachu(),
            SizedBox(height: 16),
            StatBuilder(),
          ],
        ),
      ),
      Pokeballs(),
    ],
  ),
)

• 皮卡丘各種型態的官方繪圖 ( PageView )

PageView(
  children: [
    Image.asset('assets/260px-025Pikachu.png'),
    Image.asset('assets/260px-025Pikachu-Pop_Star.png'),
    Image.asset('assets/260px-025Pikachu-Original.png'),
    Image.asset('assets/260px-025Pikachu-Gigantamax.png'),
  ],
)

• 四個角落的寶貝球 ( Transform )

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Transform.rotate(
          angle: -45 * 3.1415926 / 180,
          child: Image.asset('assets/pokeball.png', width: 32),
        ),
        Transform.rotate(
          angle: 45 * 3.1415926 / 180,
          child: Image.asset('assets/pokeball.png', width: 32),
        ),
      ],
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Transform.rotate(
          angle: -135 * 3.1415926 / 180,
          child: Image.asset('assets/pokeball.png', width: 32),
        ),
        Transform.rotate(
          angle: 135 * 3.1415926 / 180,
          child: Image.asset('assets/pokeball.png', width: 32),
        ),
      ],
    ),
  ],
)

• 總族值的其中一項 ( 這邊自學了傳遞參數的方法 )

class StatRow extends StatelessWidget {
  const StatRow({
    super.key,
    required this.name,
    required this.color,
    required this.lv50Range,
    required this.lv100Range,
    required this.baseValue,
  });

  final String name;
  final Color color;
  final String lv50Range;
  final String lv100Range;
  final int baseValue;

  ...
}

StatRow(
  name: 'HP:',
  color: Colors.green,
  lv50Range: '95 - 142',
  lv100Range: '180 - 274',
  baseValue: 35,
)

• 一點小記錄

debugShowCheckedModeBanner: false  //App 畫面不要顯示 debug

# To add assets to your application, add an assets section, like this:
  assets:
    - assets/

成品結果:

GitHub - yesaouo/Flutter_HW1

參考資料:

https://wiki.52poke.com/zh-hant/%E7%9A%AE%E5%8D%A1%E4%B8%98

#211 打造吸睛的 About 頁面