0

شروع کار با فلاتر دسکتاپ

از زمان انتشار فلاتر در دسامبر 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 تعیین شده اند ،

مقدار دهی اولیه کرد و یا حتی در یک پرونده خارجی قرار داد و از آنها به عنوان سرویس استفاده کرد ، اما برای این برنامه آزمایشی ، متغیرهای محلی برای سادگی در روش ساخت ویجت قرار دارند.

 

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *