آموزش طراحی وبسایت شخصی با فلاتر وب

فلاتر فریمورکی هست که در تمام پلتفرم های موبایل, وب, دسکتاپ قابلیت اجرا دارد.

تا به امروز آموزشی در رابطه با برنامه نویسی وب یا طراحی وبسایت از طریق Flutter تهیه نکرده بودیم و به همین دلیل تصمیم گرفتیم که اولین آموزش و در رابطه با فلاتر وب قرار دهیم.

از طریق لینک زیر میتونید خروجی پروژه نهایی را دریافت کنید.

دانلود سورس پروژه وبسایت فلاتر

برای شروع طراحی وبسایت با Flutter باید ابتدا SDK های فلاتر و زبان دارت و به آخرین نسخه آپدیت کنید.

برای آپدیت کردن فلاتر میتونید از دستور flutter upgrade استفاده کنید.

سپس باید وارد بخش beta شوید و قابلیت وب را فعال کنید که از دستورات زیر استفاده میکنیم.

 
 flutter channel beta
 flutter config --enable-web

بعد از این کار ترمینال را باز کرده و در مسیری که میخواهید پروژه خود را ذخیره کنید وارد شوید.

با دستور زیر پروژه جدیدی با نام website ایجاد میکنیم.

  flutter create myapp
 cd myapp

برای اینکه پروژه خودمون و بصورت یک وبسایت ببینیم از دستور زیر استفاده میکنیم تا توسط مرورگر گوگل کروم پروژه اجرا شود نه شبیه ساز های موبایل.

 flutter run -d chrome

بعد از اینکه پروژه پیش فرض فلاتر با موفقیت اجرا شد میتونید حالا این پروژه و وارد محیط توسعه دلخواه خودتون کنید.

نسخه وب فلاتر هنوز به شکل کامل توسعه نیافته و به همین دلیل خیلی مناسب طراحی وب اپلیکیشن های بزرگ نیست در حال حاضر که به مرور زمان تکمیل تر خواهد شد.

پکیج های فلاتر

پکیج هایی که در این پروژه استفاده شده است:

• universal_html
• url_launcher_web
• url_launcher

شروع طراحی

برای شروع من یک فایل جدید میسازم و اسم اون رو میذارم 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,
                          )
                        ],
                      ),
                    ),
                  )
                ],
              ),

خروجی نهایی هم به شکل زیر است.