你在大公司用Flutter寫網頁嗎？谷歌讓你從創意到實現只要2天了

你在大公司工作嗎？

我知道……你有沒有想過（不止一次）“哦，天哪……早上9點，我的一天已經被會議和調bug擠滿了！"

是的，幾乎每天 ‍！

我敢肯定，每次你在無聊的會議中都會去刷朋友圈！(同意的點贊)

1.我從哪開始（問題）：

我知道每個人在家裡都有很多時間做自己的事情，對吧？比如看電視節目、電影、社交媒體……

對於那些有足夠財富的人來說，通過聊天、電子郵件和會議交流的唯一途徑是什麼？

2.研究：

我們都喜歡探索，對吧？

所以，我想“我怎樣才能把探索和實際產品結合起來”。

3.工作時間：

好吧，我有8個小時的“辦公室工作”。所以，我沒有太多的Web知識，因為我主要是一個移動開發人員，現在他們做了更多的管理工作（我知道雙方的痛苦），但我知道Flutter 和Flutter Web目前處於測試版，但，你懂的…！

4.命名產品：

首先，你要為你的產品想一個好名字！

6.幹，幹，幹！

利用我的空閒時間開始一個新項目總是很有趣的，對吧？但這一次看起來真的很有潛力，範圍也沒那麼大。

選擇的工具？！

當然是用 Flutter

為什麼？因為開始一個新的項目、設計和實際完成都很容易！

它的發展實在是太快了：身為移動開發者，Web對我來說有點不同，即使我們每天都在使用它，但我們需要考慮的路線（路徑）比以往任何時候都多！不僅僅是深層次的聯繫。

我們在紐約和西蒙以及弗雷特紐約的朋友們開完會後，我突然想到了一個主意。

我的解決方案提供了一個小型的StatefulWidget導航器，沒有什麼新奇之處，也不是世界上最乾淨的工作：

<code>class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp( 
     title: 'TMSBAE',
      onGenerateRoute: (settings) => NavigatorRoute.route(settings.name),
    );
  }}/<code>

每一條路徑都將來自onGenerateRoute，然後將那個壞小子解析到我們的導航器中。

一旦我走上這條路，我就使用了核心機器學習……或者簡稱If/Else。

<code>@override
void initState() {
  super.initState();
  Future.delayed(Duration(milliseconds: 0), () {
    if (widget.path == '/') {
      Navigator.of(context).pushAndRemoveUntil(HomeScreen.route(), (_) => false);
      return;
    } else if (widget.path == '/join') {
      Navigator.of(context).pushAndRemoveUntil(JoinScreen.route(), (_) => false);
      return;
    } else if (widget.path.contains('/join/')) {
      Navigator.of(context).pushAndRemoveUntil(JoinScreen.routeCode(widget.path.split('/')[2]), (_) => false);
      return;
    } else if (widget.path == '/bae') { 

      Navigator.of(context).pushAndRemoveUntil(BaeScreen.route(), (_) => false);
    } else if (widget.path.contains('/result/')) {      Navigator.of(context).pushAndRemoveUntil(ResultScreen.routeCode(widget.path.split('/')[2]), (_) => false);
    } else if (widget.path == '/about') {​
    } else {
      Navigator.of(context).pushAndRemoveUntil(HomeScreen.route(), (_) => false);
      return;
    }
  });}}
 else {
 Navigator.of(context).pushAndRemoveUntil(HomeScreen.route(), (_) => false);
 return;
 }
 });
 }/<code>

這樣做的目的是避免獲得大量的頁面，例如：

{URL}/join/djUdmd19m4

Will open:

• “/” 主屏幕
• “/join” join屏幕
• “/join/djUdmd19m4” 我們要打開的實際屏幕。

這是Flutter開發人員使用常規onGenerateRoute方法最常見的問題。

7.設計:

我很幸運，我也是一個UI/UX設計/開發人員……所以，從技術上說，我是一個

我查看了一些設計網站，以獲得靈感，並知道更多與我的設計，調色板等…我也看了一些開放源碼字體使用和廢話，廢話。

但它們只有一/兩個屏幕大小，沒有什麼新奇之處，沒有數據庫/業務邏輯，只是一個使用動畫的簡單而酷的例子。

8.編碼:

再說一次，即使我有空閒時間，記住，我有一份全職工作，唯一的空閒時間是我在日常工作之外的時間……但足以讓這個新項目迅速完成。

做網站的時候，總有一個大字是“響應”的是的，拜託！記住這個！我們有智能手機、筆記本電腦、臺式機、平板電腦等……您的設計應該在每一個屏幕上都是實用/有用的！。

<code>SingleChildScrollView/<code>

是其中一個你會經常使用的小部件，如果你計劃有動態列表的話就不是最有用的，因為這個小部件會把所有東西都加載到內存中。

<code>MediaQuery/<code>

為了得到尺寸和方位，超級有用，現在每個人都應該知道，但是…是的。

<code>LayoutBuilder/<code>

太棒了！在考慮不同的形狀因素和屏幕時，這一個起到了很好的帶頭作用。

Screens

我有幾個：登錄頁（主頁面），創建頁面，加入頁面，結果頁面，投票頁面，關於頁面。

我在屏幕之間移動的整個業務邏輯是通過使用：

<code>Navigator.*of*(context).pushAndRemoveUntil/<code>

我不想為這個產品保留一個堆棧，因為我可以用我的AppBar和屏幕上的一些其他元素/按鈕在屏幕之間移動，拜託，它變得對PWA更友好了。

PWA

是的，flutter支持PWA與否，這兩者並不是不同的東西，它們只是兩者之間的一個補充。

如果你使用的是Flutter v.1.5+，請確保運行“Flutter create.”來獲取丟失的文件。如果由於任何原因您沒有它，讓我給您以下片段：

在index.html中

<code>/<code>

在您的/web文件夾上，您應該有一個manifest.json文件，如果沒有，它如下所示：

<code>{
    "name": "App Name",
    "short_name": "App Short Name",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#A83EF6",
    "theme_color": "#A83EF6",
    "description": "App Description",
    "orientation": "portrait-primary",
    "prefer_related_applications": false,
    "icons": [
        {
            "src": "icons/Icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "icons/Icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}/<code> 

注意那邊的一些元素：

<code>"display": "standalone"/<code>

允許您擁有全屏/本地的外觀和感覺。您可以在這裡閱讀更多信息

你的圖標應該在/web/icons（或任何其他文件夾中，但這樣看起來不錯）中，並且將是你的主屏幕/應用程序抽屜中使用的圖標。

對於我那瘋狂又好看的header，我用了：

<code>ClipPath/<code>

使用以下代碼段：

<code>class HeaderWaveClipper extends CustomClipper<path> { 
 @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, 0);
    path.lineTo(0, size.height - 100);
    path.cubicTo(
      0,
      size.height - 90,
      size.width * 0.004,
      size.height - 70,
      size.width * 0.06,
      size.height - 75,
    );
    path.cubicTo(
      size.width * 0.07,
      size.height - 75,
      size.width * 0.14,
      size.height - 95,
      size.width * 0.12,
      size.height - 65,
    );
    path.cubicTo(
      size.width * 0.12,
      size.height - 65,
      size.width * 0.08,
      size.height - 10,
      size.width / 3 * 0.98,
      size.height - 40,
    );
    path.cubicTo( 
     (size.width / 3) * 1.08,
      size.height - 40, 
     (size.width / 3) - 60,
      size.height - 5,
      (size.width / 3) + 100,
      size.height - 5,    );
    path.cubicTo(
      (size.width / 3) * 1.8,
      size.height - 5, 

      (size.width / 2) * 1.6,
      size.height,
      (size.width / 2) * 1.52,
      size.height - 30,    );
    path.cubicTo(
      (size.width / 2) * 1.52,
      size.height - 35,
      (size.width / 2) * 1.4,
      size.height - 60,
      size.width - (size.width * 0.05),
      size.height - 60,
    );
    path.cubicTo( 
     size.width - (size.width * 0.05),
      size.height - 60,
      size.width,
      size.height - 60,
      size.width,
     size.height - 90,
    ); 
   path.lineTo(size.width, 0);
    return path;
  }​
  @override
  bool shouldReclip(CustomClipper<path> oldClipper) => false;}/<path>/<path>/<code>

我花了幾個小時來解決這個問題……數學很有趣，但是……是的，花了幾個小時讓它在每一個屏幕上都反應靈敏，看起來很漂亮。

我說過每件事都花了我大約12個小時的編碼，而其中很多時間是在2天的工作框架內進行設計+測試。

在Firebase上託管花了我幾秒鐘的時間（字面上），而且由於G域的存在，使用我自己的域非常簡單。

裂變傳播？（希望如此）

我知道有一個特定的網站有我需要的東西來發布我的新創作，那就是Product Hunt - The best new products in tech.

每一個新的/酷的/怪異的產品/項目都結束了，我想知道那是什麼感覺！

我想創建我的第一個裂變傳播產品後，這麼多年的編碼沒有許多酷/有趣的想法。

這個過程相當直接：

• 創建帳戶
• 等待1周（或關注他們的時事通訊以獲得即時訪問）
• 發佈產品
• 關注每個細節（標題、描述、圖標、截圖/視頻等）
• 發佈！（你可以安排這個）

最後的想法

這真的很有趣，希望人們能經常使用它！我知道這只是一個迷因，但這個有潛力，也許團隊會在他們的日曆中包含我自動生成的鏈接，這樣每個人都有機會決定會議是否應該是電子郵件。

如果你想了解更多可以點擊下面的“瞭解詳情”，嘿嘿

閱讀更多 黑胡桃實驗室 的文章

關鍵字: 不止一次 人生第一份工作 擠滿