آموزش طراحی وبسایت شخصی با فلاتر وب
فلاتر فریمورکی است به شما امکان میدهد برنامههایی با رابط کاربری زیبا و پویا را علاوه بر اپلیکیشن های موبایل برای وب نیز ایجاد کنید.
شما با یک بار برنامه نویسی میتوانید خروجی های مختلفی به وسیله فلاتر دریافت کنید.
در انتهای آموزش میتوانید فایل نهایی پروژه را نیز دریافت کنید.
با استفاده از فلاتر، شما میتوانید برنامههای وب تک صفحهای (Single-page applications) و برنامههای وب پویا و تعاملی را برای مرورگرها تولید کنید.
این فریمورک از زبان برنامهنویسی Dart استفاده میکند که توسط Google توسعه داده شده است.
شروع پروژه فلاتر وب
برای شروع طراحی وبسایت با Flutter باید ابتدا SDK های فلاتر و زبان دارت و به آخرین نسخه آپدیت کنید.
برای آپدیت کردن فلاتر میتونید از دستور flutter upgrade استفاده کنید.
سپس باید وارد بخش beta شوید و قابلیت وب را فعال کنید که از دستورات زیر استفاده میکنیم.
flutter channel beta
flutter config --enable-web
در حال حاضر قابلیت وب در فلاتر به نسخه پایدار رسیده است و نیازی به جا به جایی بین Channel ها ندارید.
بعد از این کار ترمینال را باز کرده و در مسیری که میخواهید پروژه خود را ذخیره کنید وارد شوید.
با دستور زیر پروژه جدیدی با نام website ایجاد میکنیم.
flutter create myapp
cd myapp
برای اینکه پروژه خودمون و بصورت یک وبسایت ببینیم از دستور زیر استفاده میکنیم تا توسط مرورگر گوگل کروم پروژه اجرا شود نه شبیه ساز های موبایل.
flutter run -d chrome
بعد از اینکه پروژه پیش فرض فلاتر با موفقیت اجرا شد میتونید حالا این پروژه و وارد محیط توسعه دلخواه خودتون کنید.
نسخه وب فلاتر هنوز به شکل کامل توسعه نیافته و به همین دلیل خیلی مناسب طراحی وب اپلیکیشن های بزرگ نیست در حال حاضر که به مرور زمان تکمیل تر خواهد شد.
پکیج های فلاتر
پکیج هایی که در این پروژه استفاده شده است:
برای انجام پروژه آنها در بخش تنظیمات یعنی فایل pubspec.yaml ثبت کنید.
برنامه نویسی پروژه وب
برای شروع من یک فایل جدید میسازم و اسم اون رو میذارم CV در این ویجت ابتدا رنگ ها و استایل هایی که نیاز دارم و تعریف میکنیم. این کار و بیرون متد build انجام میدم.
var height;
static var icon_size = 20.0;
static var sized_box_width = 12.0;
var color_background = Color(0xff31313a);
static var title_white = Color(0xffe1e1e4);
static var skill_color = Color(0xffd18c28);
var name_style = TextStyle(color: title_white,fontSize: 25.0,fontFamily: 'Far');
var developer_style = TextStyle(color: skill_color,fontSize: 15.0,fontFamily: 'IranSans',fontWeight: FontWeight.w300);
var contact_me_style = TextStyle(color: title_white,fontSize: 15.0,fontFamily: 'IranSans',fontWeight: FontWeight.w300);
var contact_me_style_hover = TextStyle(color: skill_color,fontSize: 15.0,fontFamily: 'IranSans',fontWeight: FontWeight.w300);
طراحی شکل اختصاصی تصویر
برای اینکه بتونم تصویر قسمت بالایی کادر وسط را به شکل شخصی سازی شده در بیارم یک کلاس طراحی میکنم و داخل یک Clipper از این کلاس استفاده میکنم.
class ImageBackground extends CustomClipper<Path>{
@override
Path getClip(Size size) {
// TODO: implement getClip
final Path path = Path();
path.lineTo(0.0, 0.0);
path.lineTo(0.0,size.height-35.0);
path.lineTo(size.width/2, size.height);
path.lineTo(size.width, size.height-35.0);
path.lineTo(size.width, 0.0);
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
// TODO: implement shouldReclip
return true;
}
}
یک متغیر از نوع Column به نام col تعریف میکنم و در ابتدا کد تصویر خودم و داخل آن قرار میدم.
var col = Column(
children: <Widget>[
ClipPath(
clipper: ImageBackground(),
child: Container(
height: (height/2)-45,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(const Radius.circular(5.0)),
image: DecorationImage(
image: NetworkImage('img/bg.jpg'),
fit: BoxFit.fill
)
),
),
),
سپس در زیر این تصویر بخش نام و مهارت کاربر را اضافه میکنم.
Container(
margin: const EdgeInsets.only(top: 65.0),
child: Text('حسام رسولیان',style: name_style,),
),
//skill container
Container(
margin: const EdgeInsets.only(top: 10.0),
child: Text('برنامه نویس موبایل',style: developer_style,),
),
//social
row_social,
//divider
Container(
margin: const EdgeInsets.only(top: 35.0,left: 5.0),
height: 0.5,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: FractionalOffset.topLeft,
end: FractionalOffset.topRight,
colors: [color_background,title_white]
)
),
),
در کد های بالا متغیر row_social مربوط به بخش آیکون های شبکه اجتماعی می باشد که به شکل زیر آن را تکمیل میکنیم.
var row_social = Container(
margin: const EdgeInsets.only(top: 14.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network('img/stack.svg',width: icon_size,height: icon_size,),
SizedBox(width: sized_box_width,),
Image.network('img/github.svg',width: icon_size,height: icon_size,),
SizedBox(width: sized_box_width,),
Image.network('img/instagram.svg',width: icon_size,height: icon_size,),
SizedBox(width: sized_box_width,),
Image.network('img/twitter.svg',width: icon_size,height: icon_size,),
SizedBox(width: sized_box_width,),
],
),
);
ویجتی که بعد از شبکه های اجتماعی در Column قرار دادیم برای ایجاد یک خط افقی جدا کننده است که از گرادینت برای پیاده سازی کمک گرفتیم.
حالا وارد ویجت اصلی متد build میشیم و کد های زیر و مینویسیم.
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('img/OGA3ET0.jpg'),
fit: BoxFit.cover
)
),
child: Stack(
children: <Widget>[
Center(
child: Container(
height: height-80,
width: 480.0,
margin: const EdgeInsets.only(left: 30.0,bottom: 20.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
color: Color(0xff242429)
),
),
)
,
Center(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
color: color_background
),
height: height-80,
width: 480.0,
child: Stack(
children: <Widget>[
col,
],
),
),
)
],
),
);
خروجی کد های ما تا به الان به شکل زیر خواهد بود.
برای پیاده سازی بخش تماس با ما و دانلود رزومه از دوتا متد مختلف استفاده میکنیم به شکل زیر.
_lauchURL(var url) async{
if( await canLaunch(url)){
await launch(url);
}else{
throw 'cant launch';
}
}
Widget Text_Icon(var text,var icon){
return Row(
children: <Widget>[
Image.network(icon,width: 25.0,height: 25.0,),
SizedBox(width: 8.0,),
MyText(text,contact_me_style,contact_me_style_hover)
],
);
}
متد اول برای کلیک کردن و باز شدن تب جدید در مرور گر هست و متد دوم فقط آیکون و تکست رو کنار هم قرار میده.
ویجتی که در بالا به نام MyText استفاده کردیم یک متن و دوتا استایل به عنوان ورودی میگیره که با رفتن ماوس روی متن استایل نوشته تغییر میکنه.
کد این ویجت در فایل های پروژه وجود داره.
سپس متغیر col که داشتیم و ویجت های زیر و بهش اضافه میکنیم.
Container(
margin: const EdgeInsets.only(top: 35.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
padding: const EdgeInsets.only(left: 60.0),
child: InkWell(
child: Text_Icon('دانلود رزومه', 'img/download.svg'),
onTap: (){
_lauchURL('https://flutter-learn.ir');
},
),
),
Container(
padding: const EdgeInsets.only(right: 60.0),
child: InkWell(
child: Text_Icon('تماس با من', 'img/telegram.svg'),
onTap: (){
_lauchURL('https://google.com');
},
),
)
برای ساخت عکس دایره شکل وسط هم از سه ویجت زیر استفاده میکنیم.
var circle_container_border = Container(
width: 140.0,
height: 140.0,
decoration: BoxDecoration(
color: color_background,
borderRadius: BorderRadius.all(Radius.circular(70.0))
),
);
var circle_container_img = Container(
width: 134.0,
height: 134.0,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('img/mee.jpg'),
fit: BoxFit.cover
),
borderRadius: BorderRadius.all(Radius.circular(67.0))
),
);
var circle_container_right = Container(
width: 134.0,
height: 134.0,
decoration: BoxDecoration(
color: Color(0xff26f27a27),
borderRadius: BorderRadius.all(Radius.circular(67.0))
),
);
ویجت اول کمی بزرگتر هست که ازش به عنوان border استفاده میکنیم برای ویجت دوم که عکس و نشون میده و ویجت سوم هم یک دایره به صورت نیمه شفاف هست که کمی مایل به سمت راست عکس وسط نمایش داده میشود.
در ادامه جایی که از متغیر col استفاده کردیم به شکل زیر تغییر میدیم.
child: Stack(
children: <Widget>[
col,
Container(
margin: const EdgeInsets.only(bottom: 20.0),
child: Center(
child: Stack(
children: <Widget>[
Container(
margin: const EdgeInsets.only(left: 15.0,top: 10.0),
child: circle_container_right,
),
circle_container_border,
Container(
margin: const EdgeInsets.all(3.0),
child: circle_container_img,
)
],
),
),
)
],
),
خروجی نهایی هم به شکل زیر است.
مطالب زیر را حتما مطالعه کنید
آموزش پیاده سازی لینت Lint در برنامه نویسی فلاتر
آموزش الگوی تزریق وابستگی در فلاتر Dependency Injection
کتاب های آموزش برنامه نویسی فلاتر + دانلود PDF
آموزش نصب فلاتر و رفع خطاهای رایج ساخت پروژه + ویدیو
آموزش استفاده از نقشه در فلاتر
آموزش ساخت Navigation Drawer در فلاتر
9 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام من زمانی که آپلود میکنم رو هاست فقط صفحه سفید نمایش می ده
روی چه هاستی قرار دادید؟
رو گیت هاب گذاشتم صفحه سفیده
تونستی راهشو پیدا کنی برا منم همینه
سلام خسته نباشید
لینک فیلم مشکل داره . میشه بررسی کنید . با احترام
سلام در حال انتقال سرور هستیم
سلام خسته نباشید.
ممنون میشم راهنمایی کنید .
شیوه اپلود صحیح فلاتر در هاست به چه شکله.
بخصوص اتصال ان به دیتا بیس . اگر دوستان در این زمینه اطلاعاتی رو در اختیار بنده قرار بدن ممنون میشم.
یا فیلم اموزشی اگر در این زمینه وجود داره معرفی کنند.
سلام
ممنون بابت ویدئو و آموزش و زحماتتون.
الان حدودا دوسالی از این ویدِو گذشته، آیا الان هم برای توسعه وب نه اپ موبایل فلاتر پیشنهاد میدین؟ یا ری اکت و آنگولار هنوز بهترن؟
سلام اون زمان که پیشنهادی ندادم برای وب از فلاتر استفاده بشه, تو این دو سال پیشرفت زیادی کرده ولی قرار نیست از فلاتر برای ساخت وبسایت استفاده بشه هدف ساخت وب اپلیکیشن هست برای بخش وب فعلا گزینه های بهتر هست