سوسو زدن طراحی رابط کاربری یکی از اجزای ضروری ساخت اپلیکیشن های موبایل با استفاده از چارچوب Flutter است. Flutter که توسط گوگل توسعه داده شده است، یک چارچوب توسعه نرم افزار تلفن همراه منبع باز است که به توسعه دهندگان این امکان را می دهد تا برنامه های موبایلی با کارایی بالا و چند پلتفرمی برای دستگاه های اندروید و iOS ایجاد کنند. مجموعه ای غنی از ابزارک ها و ابزارهای سفارشی را برای ایجاد رابط های کاربری زیبا، پاسخگو و جذاب برای برنامه های تلفن همراه ارائه می دهد.
فهرست:
طراحی های Flutter UI چیست؟
طراحی Flutter UI به عناصر گرافیکی و تعاملی یک برنامه Flutter اشاره دارد که رابط کاربری را تشکیل می دهد. این عناصر شامل طرح‌بندی، ویجت‌ها، تایپوگرافی، رنگ‌ها و جلوه‌های انیمیشن می‌شود. Flutter طیف گسترده‌ای از ویجت‌های رابط کاربری قابل تنظیم را ارائه می‌کند که می‌توان از آنها برای ساخت رابط‌های کاربری که هم از نظر بصری جذاب و هم پاسخگو هستند استفاده کرد. Flutter همچنین طیف وسیعی از قابلیت‌های انیمیشن و گرافیک متحرک را ارائه می‌کند که می‌توان از آنها برای افزودن تعامل و علاقه بصری بیشتر به رابط کاربری استفاده کرد.
چرا از طراحی های Flutter UI استفاده می کنیم?
استفاده از طراحی های Flutter UI در هنگام ساخت اپلیکیشن های موبایل مزایای متعددی دارد. اولا، ویجت‌های Flutter بسیار قابل تنظیم هستند و مجموعه‌ای از اجزای از پیش ساخته شده را ارائه می‌دهند که می‌توان به راحتی از آنها برای ساخت طرح‌های UI پیچیده استفاده کرد. دوم، طراحی UI Flutter بسیار پاسخگو است، به این معنی که می تواند با اندازه های مختلف صفحه نمایش، وضوح، و جهت گیری دستگاه سازگار شود، و آنها را برای استفاده در طیف گسترده ای از دستگاه های تلفن همراه مناسب می کند. علاوه بر این، طراحی رابط کاربری Flutter عملکرد بالایی دارد، که تضمین می‌کند برنامه‌های موبایلی که با استفاده از Flutter ساخته می‌شوند، سریع و پاسخگو هستند، حتی در دستگاه‌های ارزان قیمت.
انیمیشن ها در مقابل طراحی های UI
تفاوت بین ویژگی‌های انیمیشن و رابط کاربری در Flutter این است که انیمیشن به جلوه‌های حرکتی و انتقالی اشاره دارد که می‌توان روی عناصر UI اعمال کرد، در حالی که ویژگی‌های UI به عناصر طراحی که رابط کاربری را تشکیل می‌دهند اشاره دارد. انیمیشن ها ابزار قدرتمندی هستند که می توانند برای افزودن جذابیت بصری و بهبود تجربه کاربری اپلیکیشن مورد استفاده قرار گیرند. Flutter طیف گسترده ای از قابلیت های انیمیشن و گرافیک متحرک، از جمله انیمیشن های صریح، انیمیشن های ضمنی و انیمیشن های مبتنی بر فیزیک را ارائه می دهد.
انیمیشن های واضح در Flutter شامل متحرک سازی یک ویژگی ویجت از یک حالت به حالت دیگر با استفاده از یک شی AnimationController است. از سوی دیگر، انیمیشن‌های ضمنی به‌طور خودکار زمانی که ویژگی ویجت تغییر می‌کند فعال می‌شوند و استفاده از آنها را بصری‌تر و آسان‌تر می‌کند. از طرف دیگر، انیمیشن‌های مبتنی بر فیزیک، شکل پیشرفته‌تری از انیمیشن هستند که جلوه‌های فیزیکی دنیای واقعی مانند جاذبه، اینرسی و اصطکاک را شبیه‌سازی می‌کنند تا تجربه‌ای واقعی‌تر و جذاب‌تر برای کاربر ایجاد کنند.
ویژگی های Flutter UI Designs
از سوی دیگر، ویژگی‌های UI به عناصر طراحی که رابط کاربری یک برنامه فلاتر را تشکیل می‌دهند اشاره دارد. این عناصر شامل طرح‌بندی، ویجت‌ها، تایپوگرافی، رنگ‌ها و دیگر عناصر طراحی هستند که برای ایجاد یک رابط کاربری بصری جذاب و بصری استفاده می‌شوند. برخی از ویژگی های محبوب UI در Flutter عبارتند از:
- طراحی متریال: طراحی متریال مجموعه‌ای از دستورالعمل‌ها و مؤلفه‌های طراحی است که Google برای ایجاد رابط‌های کاربری که از یک زبان طراحی منسجم و منسجم در پلتفرم‌ها و دستگاه‌ها پیروی می‌کنند، ایجاد کرده است. Flutter مجموعه ای از ماژول های طراحی متریال از پیش ساخته شده را ارائه می دهد که می توانند برای ایجاد برنامه های کاربردی مطابق با این دستورالعمل های طراحی استفاده شوند.
- طراحی کوپرتینویی: طراحی کوپرتینو مجموعه دیگری از دستورالعمل ها و اجزای طراحی است که اپل برای ساخت رابط کاربری برای دستگاه های iOS ایجاد کرده است. Flutter مجموعه ای از ویجت های طراحی کوپرتینویی از پیش ساخته شده را ارائه می دهد که می توان از آنها برای ایجاد برنامه های مشابه iOS که از این دستورالعمل های طراحی پیروی می کنند استفاده کرد.
- تم ها و سبک ها: تم ها و سبک ها برای تعریف ظاهر بصری یک برنامه Flutter از جمله رنگ ها، فونت ها و سایر عناصر طراحی استفاده می شوند. از تم ها و سبک ها می توان برای تعریف یک سبک بصری ثابت در سراسر برنامه استفاده کرد و به راحتی می توان آن ها را مطابق با نیازهای برنامه سفارشی کرد.
- جهت یابی: ناوبری یک ویژگی رابط کاربری مهم است که به کاربران اجازه می دهد بین صفحات یا صفحات مختلف یک برنامه حرکت کنند. Flutter مجموعه ای از ماژول های ناوبری، مانند ماژول Navigator را ارائه می دهد که می تواند برای ایجاد جریان های ناوبری در یک برنامه استفاده شود.
ابزارهای طراحی UI Flutter
وقتی صحبت از طراحی رابط های کاربری Flutter می شود، ابزارهای مختلفی وجود دارد که توسعه دهندگان می توانند از آنها برای ایجاد رابط های کاربری جذاب و جذاب استفاده کنند. برخی از ابزارهای محبوب طراحی Flutter UI عبارتند از:
- Flutter Studio: Flutter Studio یک ابزار آنلاین است که به توسعه دهندگان اجازه می دهد تا طرح های Flutter UI را در یک رابط مبتنی بر مرورگر ایجاد و تجسم کنند. این ابزار مجموعه‌ای از ویجت‌ها و طرح‌بندی‌های از پیش ساخته شده را ارائه می‌کند که می‌توان آنها را به راحتی برای ایجاد یک طراحی UI منحصر به فرد سفارشی کرد. علاوه بر این، Flutter Studio بازخورد طراحی بلادرنگ را ارائه می‌کند و به توسعه‌دهندگان این امکان را می‌دهد تا ببینند رابط کاربری در دستگاه‌های مختلف چگونه به نظر می‌رسد و چگونه رفتار می‌کند.
- Adobe XD: Adobe XD یک ابزار طراحی حرفه ای است که می تواند برای ایجاد طرح های با کیفیت بالا برای برنامه های Flutter استفاده شود. این ابزار طیف وسیعی از ویژگی های طراحی و نمونه سازی، از جمله ابزارهای طراحی برداری، نمونه سازی تعاملی و ابزارهای همکاری را ارائه می دهد. Adobe XD همچنین مجموعه‌ای از پلاگین‌ها و قالب‌های خاص Flutter را ارائه می‌دهد که ایجاد رابط کاربری Flutter را برای طراحان آسان می‌کند.
- فیگما: Figma یکی دیگر از ابزارهای طراحی محبوب است که می تواند برای ایجاد طرح های رابط کاربری برای برنامه های Flutter استفاده شود. مانند Adobe XD، Figma مجموعه‌ای از ویژگی‌های طراحی و نمونه‌سازی، از جمله ابزارهای طراحی برداری، نمونه‌سازی تعاملی و ابزارهای همکاری را ارائه می‌دهد. Figma همچنین مجموعه‌ای از پلاگین‌ها و قالب‌های خاص Flutter را ارائه می‌کند که ایجاد رابط کاربری Flutter را برای طراحان آسان می‌کند.
- طرح: Sketch یک ابزار طراحی است که در بین توسعه دهندگان iOS محبوب است، اما می توان از آن برای طراحی Flutter UI نیز استفاده کرد. این ابزار طیف وسیعی از ویژگی های طراحی و نمونه سازی، از جمله ابزارهای طراحی برداری، نمونه سازی تعاملی و ابزارهای همکاری را ارائه می دهد. Sketch همچنین مجموعه‌ای از پلاگین‌ها و قالب‌های خاص Flutter را ارائه می‌دهد که ایجاد رابط کاربری Flutter را برای طراحان آسان می‌کند.
علاوه بر این ابزارها، Flutter مجموعه ای از ابزارهای توسعه دهنده را نیز ارائه می دهد که می توانند برای ساخت و اشکال زدایی برنامه های Flutter استفاده شوند. این ابزارها عبارتند از:
- بازرس فلاتر: Flutter Inspector ابزاری است که به توسعه دهندگان اجازه می دهد تا سلسله مراتب UI یک برنامه Flutter را در زمان واقعی بررسی کنند. این ابزار اطلاعات دقیقی در مورد چیدمان، ویجت‌ها و ویژگی‌های هر عنصر رابط کاربری ارائه می‌دهد و تشخیص و رفع مشکلات رابط کاربری را آسان می‌کند.
- DevTools: DevTools مجموعه ای از ابزارهایی است که می توان از آنها برای اشکال زدایی و پروفایل برنامه های Flutter استفاده کرد. این ابزار مجموعه‌ای از معیارهای عملکرد، از جمله استفاده از CPU، استفاده از حافظه و نرخ فریم را ارائه می‌کند که بهینه‌سازی عملکرد یک برنامه فلاتر را آسان می‌کند.
- Flutter SDK: Flutter SDK مجموعه‌ای از ابزارها و کتابخانه‌هایی است که توسعه‌دهندگان می‌توانند از آن برای ساخت و استقرار برنامه‌های Flutter استفاده کنند. SDK شامل مجموعه‌ای از ویجت‌ها و طرح‌بندی‌های از پیش ساخته شده و همچنین ابزارهایی برای ساخت و استقرار برنامه‌ها در دستگاه‌های Android و iOS است.
پیاده سازی رابط کاربری صفحه ورود در فلاتر
این پروژه Flutter یک صفحه ورود به سیستم اصلی با پس زمینه گرادیان، دو فیلد متنی برای ایمیل و رمز عبور و یک دکمه ورود را پیاده سازی می کند.
در اینجا یک تفکیک کد دقیق است:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
این کد کتابخانه flutter/material.dart را وارد می کند و یک تابع اصلی ایجاد می کند که فایل اجرایی MyApp را اجرا می کند.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Login Page',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: LoginPage(),
);
}
}
این کد یک ویجت MyApp را تعریف می کند، که یک ویجت بدون حالت است که یک MaterialApp را برمی گرداند. ویجت MaterialApp عنوان برنامه را روی «صفحه ورود» تنظیم می‌کند و یک شی ThemeData را تعریف می‌کند که نمونه پایه را روی آبی و چگالی بصری را روی واکنش‌گرا تنظیم می‌کند. در نهایت، ویجت MaterialApp ویجت LoginPage را به عنوان صفحه اصلی برنامه تنظیم می کند.
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.purple, Colors.blue],
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Login',</span>
style: TextStyle(
color: Colors.white,
fontSize: 40,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 30),
Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: TextFormField(
decoration: InputDecoration(
labelText: 'Email',
labelStyle: TextStyle(color: Colors.white),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
),
),
),
SizedBox(height: 20),
Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: TextFormField(
obscureText: true,
decoration: InputDecoration(
labelText: 'Password',
labelStyle: TextStyle(color: Colors.white),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
),
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// perform login action here
},
child: Text('Login'),
),
],
),
),
);
}
}
این کد ویجت LoginPage را تعریف می کند که همچنین ویجتی بدون حالت است که یک Scaffold را برمی گرداند. ویجت Scaffold یک ساختار اساسی برای برنامه فراهم می کند، از جمله نوار برنامه و بدنه. بدنه ویجت Scaffold حاوی یک ویجت Container است که دارای یک پس زمینه گرادیان است که توسط LinearGradient تعریف شده است. در داخل کانتینر یک ویجت ستونی وجود دارد که شامل یک ویجت متنی با عنوان “ورود”، دو ویجت TextFormField برای وارد کردن ایمیل و رمز عبور و یک ابزارک ElevatedButton برای دکمه ورود است.
ویجت های TextFormField دارای یک برچسب و حاشیه هستند که توسط InputDecoration تعریف شده است. متن برچسب “ایمیل” یا “رمز عبور” است و دارای رنگ متن سفید است. رنگ قاب نیز سفید است. فیلد رمز دارای خاصیت obscureText روی true تنظیم شده است تا رمز عبور هنگام تایپ پنهان شود. ویجت های SizedBox برای ایجاد فاصله بین ویجت ها استفاده می شود.
ویجت ElevatedButton یک عملکرد onPressed دارد که با ضربه زدن کاربر روی دکمه فعال می شود. تابع در حال حاضر خالی است، اما می‌توانید کدی را برای انجام عمل ورود به سیستم در اینجا اضافه کنید.
به طور کلی، این پروژه یک رابط کاربری اصلی صفحه ورود به سیستم را ارائه می دهد که می تواند در صورت نیاز بیشتر سفارشی شود و گسترش یابد. کتابخانه flutter/material.dart طیف وسیعی از ویجت ها را فراهم می کند که می توان از آنها برای ساخت رابط های کاربری پیچیده برای برنامه های تلفن همراه استفاده کرد.
نتیجه
در نتیجه، طراحی Flutter UI یک جزء ضروری برای ساخت اپلیکیشن‌های موبایلی با کارایی بالا و چند پلتفرمی با استفاده از چارچوب Flutter است. Flutter مجموعه ای از ویجت ها و ابزارهای قابل تنظیم را برای ایجاد رابط های کاربری زیبا، پاسخگو و جذاب برای برنامه های تلفن همراه ارائه می دهد. با استفاده از این ابزارها و دستورالعمل‌های طراحی، توسعه‌دهندگان می‌توانند برنامه‌های تلفن همراهی بسازند که از نظر بصری جذاب، بصری و با کارایی بالا هستند و آنها را به انتخابی محبوب در میان توسعه‌دهندگان اپلیکیشن‌های موبایل تبدیل می‌کنند.
این ما را به پایان این وبلاگ می رساند آموزش طراحی UI Flutter. امیدوارم بتوانم به وضوح آموزش طراحی های Flutter UI را توضیح دهم و چرا باید از آن استفاده کنید
اگر می خواهید فلاتر را یاد بگیرید و می خواهید خودتان رابط های کاربری جالبی ایجاد کنید، بهترین دوره آموزشی فلاتر ارائه شده توسط Edureka، ما را بررسی کنید. برنامه درسی دوره فلاتر، توسط متخصصان صنعت هدایت شده است تا به شما در تسلط بر تمام مفاهیم آن کمک کند.
سوالی از ما دارید؟ لطفا آن را در بخش نظرات ذکر کنید و ما به شما پاسخ خواهیم داد.