آموزش ساخت صفحه لاگین ( Login ) با فلاتر ( وب اپلیکیشن در فلاتر )
فریمورک برنامه نویسی Flutter که زمان زیادی از معرفی اون توسط گوگل نمیگذره و با هدف طراحی اپلیکیشن های موبایل ایجاد شده بود, امروزه پیشرفت زیادی کرده و برای تمام پلتفرم های حال حاضر قابل استفاده هست.درباره فلاتر قبلا صحبت کرده بودیم که به طور کلی چی هست و چه مزایی داره.
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
حالا وقتش رسیده که کمی باهم دیگه به صورت عملی فلاتر و امتحان کنیم. برای شروع من قصد دارم بجای اپلیکیشن موبایل که وب اپلیکیشن طراحی کنم.کدنویسی موبایل و وب با فلاتر حدود 90درصد شبیه به هم هست و تمام کدهایی که الان مینویسم و شما به راحتی بدون دردسر میتونید تبدیل کنید به اپلیکیشن موبایل و هم نکته جذاب فلاتر هست.
برای اینکه بتونید با فلاتر برنامه نویسی وب انجام بدید باید از آخرین نسخه SDK زبان دارت و فلاتر استفاده کنید.با دستور Flutter upgrade به راحتی این بروزرسانی و انجام بدید.من از محیط کدنویسی Intellij استفاده میکنم برای برنامه نویسی شما میتونید از اندروید استودیو و یا VS Code هم استفاده کنید.اگر پلاگین زبان دارت و از داخل intellij به آخرین نسخه آپدیت کرده باشید, زمانی که وارد بخش ایجاد کردن پروژه جدید شوید و روی Dart کلیک کنید میبینید که گزینه جدید Flutter Web app اضافه شده با انتخاب این گزینه پروژه جدید شما ساخته میشود.
داخل پوشه lib فایلی به نام main.dart وجود داره که کدهای خودمون و داخل این فایل مینویسیم و با بقیه فایل ها مثل index.html کاری نداریم.من میخوام یک صفحه لاگین ساده طراحی کنم که شامل دوتا فیلد یوزرنیم و رمز عبود به همراه یک دکمه در وسط صفحه می باشد.یک ویجت به نام MyHomePage میسازم و داخل ویجت Myapp فراخوانی میکنم.داخل این کلاس اول از همه کدهای رنگی که نیاز دارم و تعریف میکنم.
class MyHomePage extends StatelessWidget {
var bakcground = Color(0xff2c3338);
var inputbackground = Color(0xff3b4148);
var iconbackground = Color(0xff363b41);
var iconcolor = Color(0xff606468);
var btncolor = Color(0xffea4c88);}
حالا داخل متد build از ویجت Column استفاده میکنم به دلیل اینکه میخوام عناصر خودم و به صورت ستونی زیر هم قرار بدم. همین ویجت Column هم داخل یک Container قرار میدم تا رنگ پس زمینه و بتونم عوض کنم.کدهای متد build به شکل زیر می باشد:
class MyHomePage extends StatelessWidget {
var bakcground = Color(0xff2c3338);
var inputbackground = Color(0xff3b4148);
var iconbackground = Color(0xff363b41);
var iconcolor = Color(0xff606468);
var btncolor = Color(0xffea4c88);
@override
Widget build(BuildContext context) {
var width = MediaQuery.of(context).size.width;
return Scaffold(
body: Container(
color: bakcground,
width: width,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(height: 20.0,),
MyIn('Username',false),
SizedBox(height: 10.0,),
MyIn('******',true),
SizedBox(height: 10.0,),
MaterialButton(
onPressed: (){},
color:btncolor ,
minWidth: 260.0,
elevation: 0.0,
padding: const EdgeInsets.symmetric(vertical: 6.0),
child: Text('SIGN IN',
style: TextStyle(
fontSize: 16.0,
color: Colors.white
),),
),
SizedBox(height: 13.0,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Not a memebet?',style: TextStyle(color: iconcolor),)
,SizedBox(width: 5.0,),
Text('Sign up now',style: TextStyle(color: Colors.white),)
],
)
],
),
),
);
}
من چون دوتا فیلد یوزرنیم و رمز عبود داشتم که طراحی شبیه به هم دارند به همین خاطر یک متد به نام MyIn ایجاد کردم و طراحی ویجتم و اونجا انجام دادم تا صرفه جویی کنم تو نوشتن برنامه.
Widget MyIn(var hint,var ispass){
var myicon;
// ignore: curly_braces_in_flow_control_structures
if(ispass) myicon = Icons.lock;
// ignore: curly_braces_in_flow_control_structures
else myicon = Icons.person;
return Container(
width: 260.0,
decoration: BoxDecoration(
color: inputbackground,
borderRadius: BorderRadius.all(Radius.circular(3.0)),
),
child: Row(
children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 12.0,horizontal: 10.0),
decoration: BoxDecoration(
color: iconbackground,
borderRadius: BorderRadius.only(topLeft: Radius.circular(3.0),bottomLeft: Radius.circular(3.0)),
),
child: Icon(myicon,color: iconcolor,)
),
SizedBox(width: 6.0,),
Container(
width: 160.0,
child: TextField(
decoration: InputDecoration.collapsed(
hintText: hint,
hintStyle: TextStyle(color: iconcolor)
),
)
)
],
),
);
}
این متد شامل یک Row هست که کنار از یک آیکون و Textfield تشکیل شده.برای اجرای پروژه های وب فلاتر شما باید از webdev را نیز نصب کنید. برای اینکار از دستور زیر استفاده کنید.
flutter packages pub global activate webdev
حالا به راحتی میتونید پروژه خودتون و اجرا کنید.خروجی کدهای ما به صورت زیر می باشد.
نویسنده : حسام رسولیان
منبع : جزیره برنامه نویسی وب سایت توسینسو