桌面 Flutter 應用程式

會煮咖啡的貓發表於2021-10-20
Flutter

原文

https://medium.com/flutterdev...

程式碼

https://github.com/flutter-de...

參考

正文

瞭解如何設定執行桌面上的應用程式在您的 Flutter 應用程式

在 Flutter 中，Flutter 應用程式螢幕上的每個元件都是一個小工具。螢幕的透檢視完全依賴於用於構建應用程式的小部件的選擇和分組。此外，應用程式程式碼的結構是一個小部件樹。

在這個部落格中，我們將瞭解如何在桌面上執行 Flutter 應用程式，以及設定這個應用程式的要求是什麼？.我們將看到一步一步的流程，並建立一個應用程式來理解桌面應用程式的構建過程。

Flutter :

“ Flutter 是谷歌的 UI 工具包，它可以幫助你在創紀錄的時間內用一個程式碼庫為移動裝置、網路和桌面構建漂亮的本地組合應用程式。”

它是免費和開源的。它最初是由谷歌發展而來，目前由 ECMA 標準監管。 Flutter 應用程式利用 Dart 程式語言來製作應用程式。這個 dart 程式設計和其他程式語言有一些相同的亮點，比如 Kotlin 和 Swift，並且可以被轉換成 JavaScript 程式碼。

Flutter 的好處:

Flutter 為我們提供了在多個平臺上執行應用程式的機會。比如，網路，桌面，Android/iOS。市場上有許多語言可以在多種平臺上執行應用程式。但與其他語言相比，flutter 在不同平臺上執行應用程式所需的時間更少。因為 flutter 不像其他語言那樣使用 mediator 橋來執行應用程式。因此，在不同的平臺上執行應用程式時， Flutter 速度很快。下面是一些關鍵點

所有平臺中相同的使用者介面和業務邏輯。

減少程式碼和開發時間。

類似於本地應用程式的效能。

自定義，動畫 UI 可用於任何複雜的小部件。

自己的渲染圖形引擎，即 skia。

簡單的平臺專用邏輯實現。

超越手機的潛在能力。

Flutter 平臺特定的標準:

特定於 Android 平臺

特定於 iOS 平臺

特定於 Web 平臺

桌面平臺專用

為桌面平臺上執行的應用程式設定特定:

  1. 首先，建立您的 Flutter 專案
  2. 然後將你的頻道切換到貝塔 Flutter 頻道。因為它涵蓋了桌面支援，在 Beta 版本中可以使用，並且在 Beta 頭條大新聞中可以使用這個命令。
> flutter channel beta Flutter

轉到 flutter 文件，點選視窗設定選項，閱讀文件。

https://flutter.dev/docs/get-...

  1. 然後使用這個命令啟用你的視窗。
> flutter config — enable-windows-desktop
檢視下面的文件

https://flutter.dev/docs/get-...

  1. 啟用視窗後 重新啟動 android studio 。
  2. 重新啟動 android studio 之後，現在使用下面的命令建立 windows 支援目錄。
> flutter create.
  1. 現在安裝 visual studio 去這個連結。

https://visualstudio.microsof...

  1. 在 visual studio 安裝後，你終於可以在桌面上執行你的應用了。選擇桌面裝置在你的 android studio 和執行應用程式。

實施方案:

現在我正在設計一個在桌面上測試的頁面。你可以在桌面上執行任何應用程式。我在這裡展示的只是這個應用程式的最後一個頁面程式碼實現，它是程式碼片段。如果你想檢視完整的程式碼，請訪問下面給出的 Github 連結。

在這個網頁上，我正在設計一個課程列表卡與影像和文字為購買課程列表。
import 'package:e_learning_app/constants/constants.dart';
import 'package:e_learning_app/model/Courses_items_model.dart';
import 'package:e_learning_app/model/read_blog_model.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:io' show Platform;

class ReadScreenView extends StatefulWidget {
  const ReadScreenView({Key? key}) : super(key: key);

  @override
  _ReadScreenViewState createState() => _ReadScreenViewState();
}

class _ReadScreenViewState extends State<ReadScreenView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildBody(),
    );
  }

  Widget _buildBody() {
    return Container(
      height: MediaQuery._of_(context).size.height,
      child: Stack(
        children: [
          Container(
            height: MediaQuery._of_(context).size.height,
            _//color: Colors.cyan,_ child: Container(
              margin: EdgeInsets.only(bottom: 350),
              height: 250,
              decoration: BoxDecoration(
                  color: Color(0xffff9b57),
                  borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(40),
                      bottomRight: Radius.circular(40))),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                      padding: EdgeInsets.only(
                          left: 20,
                          right: 20,
                          top: 30),
                      child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            InkWell(
                             onTap:(){
                               Navigator._pop_(context);
                            },
                              child: Container(
                                _//margin: EdgeInsets.only(right: 25,top: 10),_ height: 30,
                                width: 30,
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(5),
                                  color: Color(0xfff3ac7c),
                                ),
                                child: Icon(
                                  Icons._arrow_back_,
                                  color: Colors._white_,
                                  size: 20,
                                ),
                              ),
                            ),
                            Container(
                              _// margin: EdgeInsets.only(right: 25,top: 10),_ height: 30,
                              width: 30,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(5),
                                color: Color(0xfff3ac7c),
                              ),
                              child: Icon(
                                Icons._menu_,
                                color: Colors._white_,
                                size: 20,
                              ),
                            ),
                          ])),
                  Container(
                    padding: EdgeInsets.only(left: 20, right: 20, top: 16),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          child: Text(
                            "Purchase Courses",
                            style: TextStyle(
                              color: Colors._white_,
                              fontSize: 20,
                              _//fontWeight: FontWeight.bold_ ),
                          ),
                        ),
                        SizedBox(
                          height: 5,
                        ),
                        Container(
                          child: Text(
                            "Categories",
                            style: TextStyle(
                              color: Colors._white_,
                              fontSize: 12,
                              _//fontWeight: FontWeight.bold_ ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(left: 20, top: 16),
                    height: 140,
                    alignment: Alignment._center_,
                    _//color: Colors.orange,_ child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        itemCount: readBlogList.length,
                        itemBuilder: (BuildContext context, int index) {
                          return _buildCategorySection(readBlogList[index]);
                        }),
                  ),
                ],
              ),
            ),
          ),
          Positioned(
            top: 260,
            left: 0,
            right: 0,
            bottom: 0,
            child: SizedBox(
              height: MediaQuery._of_(context).size.height - 260,
              width: MediaQuery._of_(context).size.width,
              child: Container(
                _//color: Colors.yellow,_ padding: EdgeInsets.only(left: 4, right: 4),
                width: MediaQuery._of_(context).size.width,
                child: ListView.builder(
                    _//physics:  NeverScrollableScrollPhysics(),_ scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    itemCount: readBlogList.length,
                    itemBuilder: (BuildContext context, int index) {
                      return _buildPurchaseCourses(readBlogList[index]);
                    }),
              ),
            ),
          ),
          Positioned(
            bottom: 0,
            child: Container(
              padding:
                  EdgeInsets.only(left: 20, right: 20, top: 10, bottom: 10),
              height: 70,
              width: MediaQuery._of_(context).size.width,
              color: Colors._white_,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "Purchase Courses",
                        style: TextStyle(
                          color: Colors._black_,
                          fontSize: 14,
                          _//fontWeight: FontWeight.bold_ ),
                      ),
                      Text(
                        "5",
                        style: TextStyle(
                          color: Colors._red_,
                          fontSize: 20,
                          _//fontWeight: FontWeight.bold_ ),
                      ),
                    ],
                  ),
                  Container(
                    height: 40,
                    width: 130,
                    margin: EdgeInsets.only(bottom: 10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        color: Color(0xffdc4651)),
                    child: Container(
                      padding: EdgeInsets.only(left: 20, right: 20),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            "Category",
                            style: TextStyle(color: Colors._white_),
                          ),
                          Icon(Icons._arrow_drop_down_, color: Colors._white_)
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildCategorySection(ReadBlogModel readBlogList) {
    return Container(
      height: 50,
      width: 110,
      child: Card(
        color: Colors._white_,
        child: Column(
          _//mainAxisAlignment: MainAxisAlignment.spaceBetween,_ children: [
            Container(
                height: 90,
                child: ClipRRect(
                  borderRadius: BorderRadius.only(topLeft: Radius.circular(5),topRight: Radius.circular(5)),
                  child: Image.network(
                    readBlogList.image!,
                    fit: BoxFit.fill,
                    height: 50,
                    width: 110,
                  ),
                )),
            Container(
              padding: EdgeInsets.all(5),
              child: Text(
                "Categories",
                style: TextStyle(
                  color: Colors._black_,
                  fontSize: 12,
                  _//fontWeight: FontWeight.bold_ ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildPurchaseCourses(ReadBlogModel readBlogList) {
    return Container(
        margin: EdgeInsets.only(left: 10, right: 10),
        _//padding: EdgeInsets.only(left: 10,right: 20),_ height: 80,
        child: Card(
          child: Container(
            padding: EdgeInsets.only(left: 10, right: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  height: 40,
                  width: 40,
                  child: ClipRRect(
                    child: Image.network(
                      readBlogList.image!,
                      fit: BoxFit.fill,
                    ),
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
                _//SizedBox(width: 20,),_ Container(
                  padding: EdgeInsets.only(right: 120),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        readBlogList.title!,
                        style: TextStyle(
                          fontSize: 12,
                          _//fontWeight: FontWeight.bold_ ),
                      ),
                      Text(
                        readBlogList.subTitle!,
                        style: TextStyle(
                          fontSize: 12,
                          _//fontWeight: FontWeight.bold_ ),
                      ),
                    ],
                  ),
                ),
                _// SizedBox(width: 130,),_ Container(
                  height: 30,
                  width: 30,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: Color(0xfffee8db),
                  ),
                  child: Icon(
                    Icons._done_,
                    color: Color(0xffdd8e8d),
                    size: 16,
                  ),
                )
              ],
            ),
          ),
        ));
  }

}

當我們執行應用程式，我們應該得到螢幕的輸出像下面的螢幕視訊。

結語:

在本文中，我已經簡單地解釋了桌面應用程式的設定。

GitHub Link:

https://github.com/flutter-de...

© 貓哥

往期

開源

GetX Quick Start

https://github.com/ducafecat/...

新聞客戶端

https://github.com/ducafecat/...

strapi 手冊譯文

https://getstrapi.cn

微信討論群 ducafecat

系列集合

譯文

https://ducafecat.tech/catego...

開源專案

https://ducafecat.tech/catego...

Dart 程式語言基礎

https://space.bilibili.com/40...

Flutter 零基礎入門

https://space.bilibili.com/40...

Flutter 實戰從零開始 新聞客戶端

https://space.bilibili.com/40...

Flutter 元件開發

https://space.bilibili.com/40...

Flutter Bloc

https://space.bilibili.com/40...

Flutter Getx4

https://space.bilibili.com/40...

Docker Yapi

https://space.bilibili.com/40...

相關文章