از زمان انتشار فلاتر در دسامبر 2018 ،فلاتر جنب و جوش زیادی پیدا کرد و به سرعت در حال تبدیل شدن به گزینه ای برای بسیاری از توسعه دهندگان موبایل در سراسر جهان است.
در این مقاله ، روند ایجاد یک برنامه دسکتاپ ساده با فلاتر را بررسی خواهیم کرد و به بررسی امکانات و چالش های استفاده از این ابزارها برای ساخت کامل برنامه های دسکتاپ می پردازیم.
پیش نیاز
برای ساخت برنامه های دسکتاپ با فلاتر ، یک sdk به روز فلاتر با پشتیبانی دسکتاپ لازم است:
- اگر هنوز این مورد را ندارید ، فلاتر را برای سیستم عامل خود از وب سایت رسمی آن بارگیری کنید
- با flutter channel master به کانال مستر بروید
- شما می توانید Flutter (در صورت لزوم) را با flutter upgrade ارتقا دهید
برای فعال کردن پشتیبانی از محیط هدف خود:
Linux:
$ flutter config --enable-linux-desktop
macOS:
$ flutter config --enable-macos-desktop
Windows:
$ flutter config --enable-windows-desktop
برای چک کردن میزان پیشرف فلاتر دسکتاپ در سیستم عامل هدف خود به اینجا مراجعه فرمایید.
راه اندازی پروژه
برای ایجاد یک برنامه دسکتاپ ، کافیست flutter create را اجرا کنید و یک پروژه ایجاد می شود.
نمونه کد قسمت pubspec.yaml
name: example_flutter description: An example project for Flutter with desktop target support. version: 0.1.0 environment: sdk: '>=2.0.0 <3.0.0' # The example interacts with build scripts on the Flutter side that are not # yet stable, so it requires a very recent version of Flutter. # This version will increase regularly as the build scripts change. flutter: '>=1.10.2-pre.54' dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.0 color_panel: path: ./plugins/color_panel dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true # See https://github.com/flutter/flutter/wiki/Desktop-shells#fonts fonts: - family: Roboto fonts: - asset: fonts/Roboto/Roboto-Thin.ttf weight: 100 - asset: fonts/Roboto/Roboto-Light.ttf weight: 300 - asset: fonts/Roboto/Roboto-Regular.ttf weight: 400 - asset: fonts/Roboto/Roboto-Medium.ttf weight: 500 - asset: fonts/Roboto/Roboto-Bold.ttf weight: 700 - asset: fonts/Roboto/Roboto-Black.ttf weight: 900
نمونه کد قسمت در lib/main.dart
import 'package:example_flutter/home.dart'; import 'package:flutter/foundation.dart' show debugDefaultTargetPlatformOverride; import 'package:flutter/material.dart'; void main() { debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia; runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Desktop Example', theme: ThemeData( primarySwatch: Colors.indigo, fontFamily: 'Roboto', ), darkTheme: ThemeData.dark(), home: Home(title: 'Flutter Desktop Example'), ); } }
به darkTheme و مقدار () ThemeData.dark توجه داشته باشید که در صورت درخواست سیستم عامل ، یک تم تیره را فراهم می کند ، مانند macOS که با تم تیره در کل سیستم فعال است. در ادامه نگاهی خواهیم انداخت به محتوای یک صفحه مثال و آنچه
که انجام می دهد.
Home Screen
lib/home.dart:
import 'dart:io' show Platform; import 'package:flutter/material.dart'; import 'package:color_panel/color_panel.dart'; class Home extends StatefulWidget { Home({Key key, this.title}) : super(key: key); final String title; @override _HomeState createState() => _HomeState(); } class _HomeState extends State<Home> { int _counter = 0; Color _color = Colors.white; void _increment() => setState(() { _counter++; }); void _decrememt() => setState(() { _counter--; }); void _showPanel() { final colorPanel = ColorPanel.instance; if (colorPanel.showing) return; colorPanel.show(this._onGetColor, showAlpha: false); } void _onGetColor(Color color) => setState(() { _color = color; }); @override Widget build(BuildContext context) { final TextTheme _theme = Theme.of(context).textTheme; final TextStyle _style1 = _theme.body1.copyWith(color: _color); final TextStyle _style2 = _theme.display1.copyWith(color: _color); final String _os = Platform.operatingSystem; final String _hostname = Platform.localHostname; final String _numCores = Platform.numberOfProcessors.toString(); return Scaffold( appBar: AppBar(title: Text(widget.title)), body: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ FlatButton.icon( label: Text('Set Color'), icon: Icon(Icons.color_lens), onPressed: _showPanel, clipBehavior: Clip.none, ), FlatButton.icon( label: Text('Counter +'), icon: Icon(Icons.add_circle), onPressed: _increment, clipBehavior: Clip.none, ), FlatButton.icon( label: Text('Counter -'), icon: Icon(Icons.remove_circle), onPressed: _decrememt, clipBehavior: Clip.none ) ] ), Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ Text("OS: " + _os, style: _style1), Text('Hostname: ' + _hostname, style: _style1), Text('CPU Cores: ' + _numCores, style: _style1), Text('$_counter', style: _style2) ] ) ] ) ); } }
کلاس Home چند بسته را ایمپورت می کند (از جمله پلاگین color_panel) و به صورت StatefulWidget پیاده سازی می کند تا به این صفحه امکان ذخیره و به روزرسانی حالت برنامه را فراهم کند. دارت و فلاتر با استفاده از ابزارها و الگوهای متنوع ، ویژگی های
بسیار خوبی را برای مدیریت حالت فراهم می کنند ، ساده ترین آنها یک ویدجت مناسب مانند آنچه در این پرونده نشان داده شده است.
خصوصیاتی که در این ویدجت مدیریت می شوند شامل یک رنگ و شمارنده هستند. روش های _recrement و _decrement از روش setState برای افزایش یا کاهش شمارنده استفاده می کنند. روش _showPanel نمونه ای از ColorPanel را از پلاگین وارد شده
درخواست می کند و سپس نمایش روی آن را فراخوانی می کند ، که یک انتخابگر رنگ نیتیو را از سیستم عامل درخواست می کند. هنگام انتخاب رنگ ، از setState برای به روزرسانی حالت ویجت با رنگ جدید استفاده می شود ، که در صف قرار می گیرد تا توسط
انجین فلاتر دوباره طراحی شود.
روش بیلد این ویجت داده های طرح زمینه و سبک را تنظیم می کند و نام سیستم عامل ، نام هاست محلی و تعداد هسته های پردازنده را از کلاس Platform درخواست می کند. این موارد را می توان مستقیماً روی خصوصیاتی که به عنوان final تعیین شده اند ،
مقدار دهی اولیه کرد و یا حتی در یک پرونده خارجی قرار داد و از آنها به عنوان سرویس استفاده کرد ، اما برای این برنامه آزمایشی ، متغیرهای محلی برای سادگی در روش ساخت ویجت قرار دارند.