Flutter 學習資源

---

筆記資源

裡頭整理了一些可學習的資源和我們的學習筆記

DartPad

網頁版的Dart編譯環境

Flutter 介紹

介紹Flutter的各種事

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),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

以下開放共筆

結果幫我貼到這下面

範例

<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>