#Flutter 02: 電子書APP

GitHub :

https://github.com/WEN0829/flutter_2

介紹 :

這是我在國立臺灣海洋大學就讀大學部三年級時，修 Flutter 這門課時的第二次作業。題目是電子書, 儘管不是很精緻, 但希望各位會喜歡我的作品~

作品成果展示 :

成果影片需前往 youtube -> https://youtube.com/shorts/8kqLwUEChXY

成果圖片如下 :

以下是使用到的功能 :

1. ListView.Builder :

  child: ListView.builder(
                    itemCount: musics.length,
                    itemBuilder: (BuildContext context, int index) {
                    ...
                    }
  )

2. Navigator :

 Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) {
        return ...
      },
    ),
  );

3. InkWell & GestureDetector :

 return GestureDetector(
    onTap: () {
      Navigator.push(
      ...
    },

 child: ListView.builder(
    itemCount: musics.length,
    itemBuilder: (BuildContext context, int index) {
      return InkWell(
        onTap: () {
          ...
              },
      ),
    },
 ),

4. GridView :

  return GridView.count(
    crossAxisCount: 2,
    childAspectRatio: 9 / 11,
    shrinkWrap: true,
    physics: NeverScrollableScrollPhysics(),
    children: List.generate(8, (index) {
      return Container(
           ...
        ),
    },
 );

5. TabBar & TabBarView :

  appBar: AppBar(
    ...
    bottom: const TabBar(
      tabs: [
        Tab(icon: Icon(Icons.music_note)),
        Tab(icon: Icon(Icons.book)),
        Tab(icon: Icon(Icons.smart_button)),
      ],
    ),
  ),

  body: TabBarView(
    children: [
      Column(
        children: [
          Divider(
            ...
          ),
          ...
        ],
      ),
    ],
  ),

6. Card :

  child: Card(
    elevation: 2,
    shape: RoundedRectangleBorder(
      ...
    ),
    child: Container(
      ...
    ),
  ),

7. 自定義型別 :

  final List<String> bookTitles = const [
    '原子習慣：細微改變帶來巨大成就的實證法則',
    '被討厭的勇氣:自我啟發之父阿德勒的教導',
    '有錢人想的和你不一樣',
    '讓天賦自由',
    '情緒勒索:那些在伴侶親子 職場間，最讓人窒息的相處',
    '餘生是你 晚點沒關係',
    '蛤蟆先生去看心理師',
    '底層邏輯:看清這個世界的底牌',
  ];

  ...

   Padding(
    ...
    child: Text(
      bookTitles[index],
      ...
      ),
      overflow: TextOverflow.ellipsis,
    ),
  ),

8. 每個頁面定義的 Stateless Widget

import 'package:flutter/material.dart';
...

class MusicDetail extends StatelessWidget {
  const MusicDetail({Key? key, required this.content}) : super(key: key);
  final Content content;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        ...
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ...
            Padding(
             ...
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '歌名: ${content.name}',
                    ...
                  ),
                  SizedBox(height: 8),
                  Text(
                    '歌手: ${content.author}',
                    ...
                  ),
                  SizedBox(height: 16),
                  ...
                  SizedBox(height: 8),
                  Text(
                    content.lyrics,
                    ...
                  ),
                  TextButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: const Text('close'),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';
...

class Subject_detail extends StatelessWidget {
  const Subject_detail({Key? key, required this.subject}) : super(key: key);
  final Subject subject;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        ...
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ...
            Padding(
              ...
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      '科目: ${subject.quetions}',
                      ...
                    ),
                  ),
                  SizedBox(height: 8),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      '題目: ${subject.statement}',
                      ...
                    ),
                  ),
                  SizedBox(height: 8),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      '答案:',
                      ...
                    ),
                  ),
                  ...
                  TextButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: const Text('close'),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

心得 :

這是我花了三天半才弄出來的電子書, 過程中一直刪改, 一直想符合功課要求, 但也一邊腦袋打結, 雖然光構思就想了快一天, 但過程中無論是上網找資料還是求助 ChatGPT 都讓我更加了解 Flutter 這個語言, 希望之後能做的更好!!!