Desktop Flutter application

original

https://medium.com/flutterdevs/flutter-app-for-desktop-d949f4d20cdb

Code

https://github.com/flutter-devs/flutter_app_for_desktop

refer to

https://flutter.dev/docs/get-started/install/windows#windows-setup

text

Learn how to set up and run desktop applications in your Flutter application

In Flutter, each component on the Flutter application screen is a small tool. The perspective of the screen is completely dependent on the selection and grouping of the widgets used to build the application. In addition, the structure of the application code is a tree of widgets.

In this blog, we will learn how to run a Flutter application on the desktop, and what are the requirements for setting up this application? We will see a step by step process and create an application to understand the process of building a desktop application.

Flutter :

"Flutter is Google's UI toolkit. It can help you build beautiful native composite applications for mobile devices, the web, and the desktop with a code base in record time."

It is free and open source. It was originally developed by Google and is currently regulated by ECMA standards. Flutter applications use the Dart programming language to make applications. This dart programming has some of the same highlights as other programming languages, such as Kotlin and Swift, and can be converted into JavaScript code.

Benefits of Flutter:

Flutter provides us with the opportunity to run applications on multiple platforms. For example, web, desktop, Android/iOS. There are many languages on the market that can run applications on multiple platforms. But compared with other languages, flutter requires less time to run applications on different platforms. Because flutter does not use mediator bridge to run applications like other languages. Therefore, Flutter is very fast when running applications on different platforms. Here are some key points

The same user interface and business logic in all platforms.
Reduce code and development time.
Similar to the performance of local applications.
Custom, animated UI can be used for any complex widgets.
Own rendering graphics engine, namely skia.
Simple platform-specific logic implementation.
Beyond the potential capabilities of mobile phones.

Flutter platform-specific standards:

Specific to the Android platform
Specific to iOS platform
Web platform specific
Dedicated for desktop platform

Set specific for applications running on desktop platforms:

First, create your Flutter project
Then switch your channel to the Beta Flutter channel. Because it covers desktop support, it can be used in the Beta version, and this command can be used in Beta headlines.

> flutter channel beta Flutter

Go to the flutter document, click the window setting option, and read the document.

https://flutter.dev/docs/get-started/install/windows#windows-setup

Then use this command to enable your window.

> flutter config — enable-windows-desktop

Check out the document below

https://flutter.dev/docs/get-started/install/windows#windows-setup

After enabling the window restart android studio .
After restarting android studio, now use the following command to create the windows support directory.

> flutter create.

Now install visual studio and go to this link.

https://visualstudio.microsoft.com/downloads/

After visual studio is installed, you can finally run your application on the desktop. Select the desktop device on your android studio and run the application.

implementation plan:

Now I am designing a page to be tested on the desktop. You can run any application on the desktop. What I show here is only the code implementation of the last page of this application, which is a code snippet. If you want to view the complete code, please visit the Github link given below.

On this page, I am designing a course list card with images and text for the purchase course list.

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

}

When we run the application, we should get the screen output like the screen video below.