In Flutter every component on a screen of the Flutter application is a widget. The screen’s perspective entirely relies on the choice and grouping of the widgets used to build the application. Also, the structure of the code of an application is a tree of widgets.
In this blog, we will understand how to run the flutter application on the desktop and what is the requirement to set up this?. We will see the step-by-step flow and create an app for understanding the Desktop app building process.
Table Contents:
Flutter platform-specific criteria
Set Up for run application on desktop
Flutter :
“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ”
It is free and open-source. It was at first evolved from Google and is presently overseen by an ECMA standard. Flutter applications utilize the Dart programming language for making an application. The dart programming shares a few same highlights as other programming dialects, like Kotlin and Swift, and can be trans-arranged into JavaScript code.
Flutter benefits:
Flutter provides us to run the application on multiple platforms. like, Web, Desktop, Android / iOS. There are many languages in the market that run the application on multiple platforms. but flutter takes less time to run the application on different platforms as compared to other languages. because flutter does not use the mediator bridge to run the application as other languages do. So flutter is fast to run the application on different platforms. here is some key point below
- Same UI and Business Logic in All Platforms.
- Reduced Code and Development Time.
- Similar to Native App Performance.
- Custom, Animated UI is Available for any complex widget.
- Own Rendering graphic Engine i.e. skia.
- Simple Platform-Specific Logic Implementation.
- The Potential Ability to Go Beyond Mobile.
Flutter platform-specific criteria:
- Android Platform Specific
- iOS Platform Specific
- Web Platform Specific
- Desktop Platform Specific
Set Up for run application on Desktop Platform Specific:
- First, you create your flutter project.
2- And then switch your channel to the Beta Flutter channel. because it covers desktop support Which is available in Beta release and for switching channels into beta using this command.
- > flutter channel beta
Go to the flutter documentation and click on the window setup option and read the documentation.
https://flutter.dev/docs/get-started/install/windows#windows-setup
3- And then Enable your window using this command.
- > flutter config — enable-windows-desktop
Check below documentation
https://flutter.dev/docs/get-started/install/windows#windows-setup
5- After enabling your window restart your Android studio.
6- After restarting android studio And now create windows support directory using the below command.
- > flutter create.
7- Now install visual studio go to this link.
Download Visual Studio Tools – Install Free for Windows, Mac, Linux
Full-featured integrated development environment (IDE) for Android, iOS, Windows, web, and cloud Powerful IDE, free for…visualstudio.microsoft.com
8- After visual studio installation finally you can run your app for desktop. Select the Desktop device in your android studio and run the application.
Implementation:
Now I am designing a page for testing on the Desktop. You can make any app for a run on the desktop. I am showing only the last page code implementation of this app here is the code snippet. If you want to look full code then go to the Github link given below.
On this page, I am designing a courses list card with images and text for purchase courses 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 ought to get the screen’s output like the underneath screen video.
Conclusion:
In this article, I have explained the setup for the Desktop applications in a flutter.
I hope this blog will provide you with sufficient information on Trying up the Explore, and explain in brief your flutter projects.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
GitHub Link:
find the source code of the Flutter E-learning Demo app
GitHub – flutter-devs/flutter_app_for_desktop: how to set up for run the application on desktop
Permalink Failed to load the latest commit information. A new Flutter project. This project is a starting point for a…github.com
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
