新版 Dartpad 支援 Flutter

隨著 Flutter 1.12 新版 SDK 發佈，DartPad 也跟著進化了，可以直接在線上跑 Flutter ，不再只是顯示「Hello World 」的 DartPad 了。

開啟 DartPad ，預設情況是Dart 模式，需點擊左上角有一個 「New Pad」進行選擇切換：

切換到 Flutter 模式，即可以在左手邊程式碼編輯區，撰寫 Flutter 程式。編寫完成可以點擊 Run 藍色按鈕，即可以在右手邊看到執行結果。

範例程式碼：顯示對話訊息視窗

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('HKT線上教室'),
        ),
        body: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: Text('顯示對話視窗訊息'),
        onPressed: () {
          showAlert(context);
        },
      ),
    );
  }
}

Future<void> showAlert(BuildContext context) {
  return showDialog<void>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('測試標題'),
        content: const Text('測試內容.....'),
        actions: <Widget>[
          FlatButton(
            child: Text('確定'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

---

那今天就介紹到這邊囉～

順帶一提，KT 線上教室，臉書粉絲團，會不定期發佈相關資訊，不想錯過最新資訊，不要忘記來按讚，加追蹤喔！也歡迎大家將這篇文章分享給更多人喔。

我們明天見囉！！！掰掰～