The original
Medium.com/flutterdevs…
code
Github.com/flutter-dev…
reference
- Flutter. Dev/docs/get – st…
The body of the
Learn how to set up to run desktop applications in your Flutter application
In Flutter, each component on the Screen of the Flutter application is a gadget. The perspective of the screen is entirely dependent on the selection and grouping of widgets used to build the application. In addition, the structure of the application code is a widget tree.
In this blog we will learn how to run the Flutter application on the desktop and what are the requirements for setting up this application? We’ll walk through the step-by-step process and create an application to understand the desktop application build process.
Flutter :
“Flutter is Google’s UI toolkit that helps you build beautiful native composite applications for mobile devices, the web, and the desktop in record time with a single code base.”
It is free and open source. It was originally developed by Google and is currently regulated by ECMA standards. The Flutter application makes use of the Dart programming language to make applications. This DART programming has some of the same advantages as other programming languages, such as Kotlin and Swift, and can be converted to JavaScript code.
Benefits of Flutter:
Flutter gives us 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 Flutter takes less time to run applications on different platforms than other languages. Because Flutter does not use mediator bridge to run applications like other languages. Therefore, Flutter is fast when running applications on different platforms. Here are some key points
The same user interface and business logic across all platforms.
Reduce code and development time.
Similar to native application performance.
Custom, animated UI can be used for any complex widget.
Its own rendering graphics engine, skia.
Simple platform-specific logic implementation.
Beyond the potential of mobile phones.
Specific criteria for the Flutter platform:
Android platform specific
IOS platform specific
Web platform-specific
Desktop platform only
Set specific Settings for applications running on desktop platforms:
-
First, create your Flutter project
-
Then switch your channel to beta Flutter. Because it covers desktop support, it is available in Beta, and it is available in Beta headlines.
> flutter channel beta Flutter
Copy the codeGo to the Flutter document, click on the Window Settings options, and read the document.
Flutter. Dev/docs/get – st…
- Then use this command to enable your window.
> Flutter config -enable-windows-desktopCopy the codeCheck out the documentation below
Flutter. Dev/docs/get – st…
-
Restart Android Studio after the window is enabled.
-
After restarting Android Studio, now create the Windows Support directory using the following command.
> flutter create.
Copy the code- Now install Visual Studio go to this link.
visualstudio.microsoft.com/downloads/
- With Visual Studio installed, you can finally run your application on your desktop. Select desktop devices in your
android studioAnd run the application.
Implementation plan:
Right now I’m designing a page to test on the desktop. You can run any application on your desktop. What I’m showing here is just the last page code implementation of the application, which is a snippet. If you want to see the full code, please visit the Github link given below.
On this page I am designing a course list card with images and text for purchasing the 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,),),),),)); }}Copy the codeWhen we run the application, we should get screen output like the screen video below.
Conclusion:
In this article, I have briefly explained the desktop application setup.
GitHub Link:
Github.com/flutter-dev…
The elder brother of the © cat
-
ducafecat.tech/
-
github.com/ducafecat