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

 flutter channel beta
 flutter config --enable-web

flutter create myapp
 cd myapp

 flutter run -d chrome

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);

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;
  }


}

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]

            )
          ),
        ),

  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,),
        ],
      ),

    );

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)
        ],
      );
    }

 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))
      ),
    );

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,
                          )
                        ],
                      ),
                    ),
                  )
                ],
              ),