---
# System prepended metadata

title: Flutter 學習資源

---

<!-- description[由社群成員一同整理的 Flutter 學習資源。] -->

# Flutter 學習資源

[筆記資源](https://niiuu.notion.site/Flutter-e623d577622a4013916e42723e40fdcf)
---
裡頭整理了一些可學習的資源和我們的學習筆記

[DartPad](https://dartpad.dev/?)
---
網頁版的Dart編譯環境

[Flutter 介紹](https://flutter-onepiece.notion.site/1-1-Flutter-c16b807300f741eba9abbc485c4d5acb)
---
介紹Flutter的各種事

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'GDSC Flutter App',
        theme: ThemeData(
          useMaterial3: true,
        ),
        home: const Resume());
  }
}

class Resume extends StatelessWidget {
  const Resume({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Colors.lightBlue,
        foregroundColor: Colors.grey.shade200,
        title: const Text(
          'Information',
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 24),
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 72.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 50),
            const Center(
              child: CircleAvatar(
                backgroundColor: Colors.black38,
                radius: 83,
                child: CircleAvatar(
                  backgroundImage: NetworkImage(
                    'https://i.imgur.com/sAipZnI.jpg',
                  ),
                  radius: 80,
                ),
              ),
            ),
            const SizedBox(
              height: 50,
            ),
            Text(
              'Name',
              style: TextStyle(
                  color: Colors.grey.shade600,
                  fontSize: 18,
                  fontWeight: FontWeight.bold),
            ),
            Text(
              'GDSC',
              style: TextStyle(
                  color: Colors.yellow.shade800,
                  fontSize: 28,
                  fontWeight: FontWeight.bold),
            ),
            const SizedBox(
              height: 50,
            ),
            Text(
              'Website',
              style: TextStyle(
                  color: Colors.grey.shade600,
                  fontSize: 18,
                  fontWeight: FontWeight.bold),
            ),
            Text(
              'Gdsc.Ilan.com',
              style: TextStyle(
                  color: Colors.yellow.shade800,
                  fontSize: 28,
                  fontWeight: FontWeight.bold),
            ),
            const SizedBox(
              height: 50,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Icon(
                  Icons.email,
                  size: 30,
                  color: Colors.grey.shade700,
                ),
                const SizedBox(
                  width: 8,
                ),
                const Text(
                  'gdsc.niu@gmail.com',
                  style: TextStyle(
                      color: Colors.black45,
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                      letterSpacing: 1),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

```

以下開放共筆
---
### 結果幫我貼到這下面
範例
![](https://i.imgur.com/5Fza164.png)
![](https://i.imgur.com/LtC8Qh7.png)
![](https://i.imgur.com/MckVNQt.png)
![](https://i.imgur.com/hWgbzvm.png)
![](https://i.imgur.com/pjP7xek.png)
![](https://i.imgur.com/XM1k3kU.png)
![](https://i.imgur.com/9wFeigT.png)
![](https://i.imgur.com/N9bODMy.png)






















































<style>
    .navbar-brand:before {
        content: 'GDSC NIU × ' !important;
        padding-left: 2em;
        background-image: url(https://logogen.dscasu.com/logos/gdsc-logo.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    .navbar-brand > .fa-file-text {
        display: none;
    }
    .red{
        color:#F00;
        font-weight: bold;
    }
</style>