آموزش طراحی وبسایت شخصی با فلاتر وب
فلاتر فریمورکی هست که در تمام پلتفرم های موبایل, وب, دسکتاپ قابلیت اجرا دارد.
تا به امروز آموزشی در رابطه با برنامه نویسی وب یا طراحی وبسایت از طریق Flutter تهیه نکرده بودیم و به همین دلیل تصمیم گرفتیم که اولین آموزش و در رابطه با فلاتر وب قرار دهیم.
از طریق لینک زیر میتونید خروجی پروژه نهایی را دریافت کنید.
برای شروع طراحی وبسایت با Flutter باید ابتدا SDK های فلاتر و زبان دارت و به آخرین نسخه آپدیت کنید.
برای آپدیت کردن فلاتر میتونید از دستور flutter upgrade استفاده کنید.
سپس باید وارد بخش beta شوید و قابلیت وب را فعال کنید که از دستورات زیر استفاده میکنیم.
flutter channel beta
flutter config --enable-web
بعد از این کار ترمینال را باز کرده و در مسیری که میخواهید پروژه خود را ذخیره کنید وارد شوید.
با دستور زیر پروژه جدیدی با نام website ایجاد میکنیم.
flutter create myapp
cd myapp
برای اینکه پروژه خودمون و بصورت یک وبسایت ببینیم از دستور زیر استفاده میکنیم تا توسط مرورگر گوگل کروم پروژه اجرا شود نه شبیه ساز های موبایل.
flutter run -d chrome
بعد از اینکه پروژه پیش فرض فلاتر با موفقیت اجرا شد میتونید حالا این پروژه و وارد محیط توسعه دلخواه خودتون کنید.
نسخه وب فلاتر هنوز به شکل کامل توسعه نیافته و به همین دلیل خیلی مناسب طراحی وب اپلیکیشن های بزرگ نیست در حال حاضر که به مرور زمان تکمیل تر خواهد شد.
پکیج های فلاتر
پکیج هایی که در این پروژه استفاده شده است:
شروع طراحی
برای شروع من یک فایل جدید میسازم و اسم اون رو میذارم 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{
@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 oldClipper) {
// TODO: implement shouldReclip
return true;
}
}
یک متغیر از نوع Column به نام col تعریف میکنم و در ابتدا کد تصویر خودم و داخل آن قرار میدم.
var col = Column(
children: [
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: [
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: [
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: [
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: [
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: [
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: [
col,
Container(
margin: const EdgeInsets.only(bottom: 20.0),
child: Center(
child: Stack(
children: [
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,
)
],
),
),
)
],
),
خروجی نهایی هم به شکل زیر است.
مطالب زیر را حتما مطالعه کنید
آموزش پیاده سازی دیتابیس ObjectBox در فلاتر
آموزش اتصال اپلیکیشن فلاتر به پرینتر بلوتوثی
آموزش پیاده سازی معماری MVVM در فلاتر
روش های افزایش امنیت اپلیکیشن در فلاتر
آموزش کار با پکیج Freezed در فلاتر
آموزش ویجت SafeArea در فلاتر
9 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام من زمانی که آپلود میکنم رو هاست فقط صفحه سفید نمایش می ده
روی چه هاستی قرار دادید؟
رو گیت هاب گذاشتم صفحه سفیده
تونستی راهشو پیدا کنی برا منم همینه
سلام خسته نباشید
لینک فیلم مشکل داره . میشه بررسی کنید . با احترام
سلام در حال انتقال سرور هستیم
سلام خسته نباشید.
ممنون میشم راهنمایی کنید .
شیوه اپلود صحیح فلاتر در هاست به چه شکله.
بخصوص اتصال ان به دیتا بیس . اگر دوستان در این زمینه اطلاعاتی رو در اختیار بنده قرار بدن ممنون میشم.
یا فیلم اموزشی اگر در این زمینه وجود داره معرفی کنند.
سلام
ممنون بابت ویدئو و آموزش و زحماتتون.
الان حدودا دوسالی از این ویدِو گذشته، آیا الان هم برای توسعه وب نه اپ موبایل فلاتر پیشنهاد میدین؟ یا ری اکت و آنگولار هنوز بهترن؟
سلام اون زمان که پیشنهادی ندادم برای وب از فلاتر استفاده بشه, تو این دو سال پیشرفت زیادی کرده ولی قرار نیست از فلاتر برای ساخت وبسایت استفاده بشه هدف ساخت وب اپلیکیشن هست برای بخش وب فعلا گزینه های بهتر هست