در این مقاله قصد داریم تا شما را با متریال دیزاین در فلاتر آشنا کنیم. شاید شما نیز اینروز ها نام flutter را شنیده باشید. این فریمورک رابط کاربری در سال 2017 توسط گوگل ساخته شده است. برای اینکه ما این مقاله را شروع کنیم ابتدا باید ببینیم متریال دیزاین چیست و اساساً متریال دیزاین چه نوع طراحی است. پس از این کار به ساخت اپ material design میپردازیم.
متریال دیزاین چیست؟
متریال دیزاین(Material design) یکی از روش های طراحی است که با قدرت هرچه بیشتر توانسته ترکیبی از رابط کاربری خوب و طراحی خوب را داشته باشد. اگر شما از گوشی های اندروید و یا نرم افزار های گوگل در گوشی خود استفاده کرده باشید به وضوح این روش طراحی را مشاهده خواهید کرد. محصولات اختصاصی Google مانند Keep ، Meet و Maps و همچنین برنامه های معروفی مانند WhatsApp و DropBox همه و همه از دستورالعمل های Material Design پیروی می کنند.
کتابخانه فلاتر متریال
برخی از ابزار های موجود در کتابخانه فلاتر متریال شامل دکمه ها و چک باکس ها و تاریخ و... که استاندارد اصلی هر طراحی UI هسستند، می شود. باید گفت که کلید ساخت یک نرم افزار متریال دیزاین استفاده از ویجت های ساده ای به نام material app و scaffold هستند.
ساخت یک اپلیکیشن متریال دیزاین
قبل از اینکه شروع به ساخت یک اپ متریال دیزاین کنیم لازم است تا با دو ویجت material app و scaffold آشنا شویم و نحوه کار آن ها را ببینیم.
ویجت Material app
ویجت متریال اپ، قابلیت های گوناگونی از جمله ساپورت تم ها، navigation و localization را انجام میدهد. در پایین مثالی از یک اپ کوچک فلاتر متریال داریم.
import 'package:flutter/material.dart';
main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Text('Hello, Flutter'),
),
),
);
}
}
متریال اپ ویژگی های بسیار زیادی را دارد که ما در اینجا فقط یک صفحه هوم ساده ساختیم و خواستیم نحوه انجام کار را به شما نمایش دهیم و بتوانیم مراحل بعدی را روی آن پیاده کنیم.
ویجت Scaffold
برنامه ای که در بالا ساختیم چیز هایی را کم دارد یا بهتر است بگوییم برخی ویژگی های آن گم شده اند. برای مثال تولباری در بالای صفحه قرار ندارد و یا دکمه ای برای navigation در پایین صفحه قرار نگرفته است همچنین اگر یک دکمه شناور داشتیم زیبایی بسیار زیادی به برنامه خود میدادیم. پس حال چه کاری میتوان انجام داد؟ پاسخ این سوال در ویجت scaffold است. این ویجت وظیفه چیدمان بصری را برای ما دارد و تمام قابلیت هایی که بالا گفتیم توسط این ویجت میتواند به سادگی به برنامه ما اضافه شود. در پایین با استفاده از ویجت scaffold برنامه ای که از قبل نوشته بودیم را اندکی تغییر دادیم. برای اینکار باید یه وسیله VS code ویا Flutter cli پروژه فلاتر جدیدی ایجاد کرده و برروی lib/main.dart بنویسید و سپس با زدن کلید F5 میتوانید خروجی برنامه خود را مشاهده کنید.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: MyStatefulWidget(),
debugShowCheckedModeBanner: false);
}
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('To-Do List'), actions: <Widget>[
// action button
IconButton(
icon: Icon(Icons.person),
onPressed: () {
// TODO
},
),
]),
body: Center(child: Text('Log on to view todo items')),
floatingActionButton: FloatingActionButton(
onPressed: () {
// TODO
},
tooltip: 'Add Task',
child: const Icon(Icons.add),
),
);
}
}
شکل اپ ما در نهایت به شکل زیر در می آید.
نکاتی که در این مرحله باید توجه کنیم این است که با کلیک بر روی دکمه شناور هیچ حرکتی را مشاهده نخواهیم کرد. از طرفی پارامتر اصلی ویجت MaterialApp اکنون به یک ویجت Stateful به نام MyStatefulWidget اختصاص داده شده است. این حالت ویجت Scaffold را تعریف میکند. نکته بعدی که باید به آن توجه کنیم این است که ویجت scaffold به طور خودکار صفحه را پر می کند و اجازه می دهد متن به صورت عمودی و افقی در مرکز قرار گیرد.
بین صفحات حرکت کنیم
ما میخواهیم اگر کاربر برروی دکمه ورود کلیک کرد به صفحه دیگری هدایت شود. اینکار با استفاده از ویجت navigation در فلاتر انجام می شود. screen ها در دنیای فلاتر با نام routes شناخته می شوند و route ها در درون stack و navigator manager قرار گرفته اند. Stack از متد های navigator,push() و navigator.pop() استفاده می کند. حال بیایید نشان دهیم که چگونه میتوان از یک روت به روت دیگری تغییر مکان داد و با ساخت یک ویجت یا screen هنگامی که کاربر بر روی گزینه login کلیک میکند به صفحه بعدی رفت.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: MyStatefulWidget(),
debugShowCheckedModeBanner: false);
}
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('To-Do List'), actions: <Widget>[
// action button
IconButton(
icon: Icon(Icons.person),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => LoginRoute()),
);
},
),
]),
body: Center(child: Text('Log on to view todo items')),
floatingActionButton: FloatingActionButton(
onPressed: () {
// TODO
},
tooltip: 'Add Task',
child: const Icon(Icons.add),
),
);
}
}
class LoginRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("This is the login route"),
),
body: Center(
child: RaisedButton(
onPressed: () {
// Navigate back to first route when tapped.
Navigator.pop(context);
},
child: Text('Go back!'),
),
),
);
}
}
نکاتی که درباره این کد مهم است این است که در خط 51 ما یک ویجت statless با نام LoginRoute ساختیم که یک دکمه برای برگشت برنامه به صفحه خانه به ما میدهد. از طرف دیگر در خط 31 ما از روش navigator.push() برای سوئیچ عملکرد دکمه ورود به سیستم از Onpressed به یک روت جدید استفاده کردیم همچنین در خط 62 تلاش کردیم که با آوردن POP در روت آخر استک عملکرد برگشت به صفحه خانگی را اندکی ساده تر کنیم.
در پایان باید گفت که با استفاده از متریال دیزاین میتوانید جلوه بسیار زیبایی به نرم افزار های خود داده و از آنجایی که با استفاده از فلاتر میتوانید برای android و IOS برنامه نویسی کنید، شروع به استفاده از متریال دیزاین برای هر دو سیستم عامل محبوب کنید تا کاربران بیشتری را با استفاده از این رابط کاربری به روز جذب کرده و به محبوبیت و ظاهر بهتر اپلیکیشن خود کمک کنید.
