آموزش پروژه محور Ui اپلیکیشن whatsapp در فلاتر - قسمت 1

این بار با آموزش پروژه محور Ui اپلیکیشن whatsapp در فلاتر - قسمت 1 خدمت شما عزیزان هستیم.

1- مقدمه :

حتما تا به امروز از اپلیکیشن پر کاربرد whatsap استفاده کرده اید که با ورود به داخل آن ، ابتدا صفحه ی اولیه ای که نمایش داده می شود با مقداری تاخیر برای رفتن به قسمت chat انجام می گیرد

امروز قصد داریم که انجام چنین عملی را در برنامه به شما کاربران گرامی آموزش دهیم و در مقاله های بعدی به تکمیل کردن آن خواهیم پرداخت ، پس اگر شما نیز علاقه مند به یاد گیری این قسمت در whatsapp می باشید با ما همراه باشید.

2- حذف کدها و شروع ساخت پروژه :

برای شروع تمامی کدها اولیه در برنامه را به جز قسمت void main و import آن را حذف می کنیم.

سپس خارج از بدنه ی MyApp کلاس StatelessWidget را با استفاده از (stl) ، زدن Enter و قرار دادن نام MyApp در برنامه ایجاد می کنیم.

نکته : به حروف های کوچک و بزرگ برنامه دقت زیادی داشته باشید و عینا از همان ها در برنامه خود استفاده کنید.

بعد ساخت MyApp در ‌build موجود میان برنامه MaterialApp را return مینماییم فقط باید به سیمیکالن ای که در آخر آن باید قرار داد نیز توجه کنید.

داخل MaterialApp مقدار debugShowCheckedModeBanner را false برای برداشته شدن بنر گوشه ی تصویر قرار می دهیم.

با اتمام این کار از SplashScreen برای نمایش در home ای که اضافه کرده ایم استفاده می کنیم.

3- ساخت SplashScreen :

برای ساخت SplashScreen یک کلاس StatefulWidget در بیرون بدنه ویجت قبلی که با هم ساختیم با عبارت (stf) قرار می دهیم با ساخت این ویجت شش نقطه در بدنه آن به صورت چشمک زن به شما نمایش داده خواهد شد.

دلیل استفاده از این ویجت برای این است که صفحه اولیه ، بعد از ۳ یا ۵ ثانیه میخواهد به صحفه ی اصلی نویگیت شود.

الان باید قسمت های چشمک زن را نام گذاری کینم که دقیقا نامی که برای home استفاده کرده بودیم را به آن اختصاص می دهیم.

کد :

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SplashScreen(),
    );
  }
}
class SplashScreen extends StatefulWidget {
  const SplashScreen({Key? key}) : super(key: key);

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

وقتی که نام گذاری را انجام دهید باید خطای SplashScreen شما در home رفع شده باشد .

اگر حین نام گذاری به صورت اتفاقی نام را اشتباه قرار دادید و یا حروفی از آن کم گذاشته بودید می توانید با انتخاب یکی از نام ها و استفاده از (Ctrl+D) تمامی این نام ها را مجددا اصلاح نمایید.

در ‌build این کلاس نیز یک Scaffold را مجددا return می کنیم و در بدنه آن برای تغییر رنگ صفحه از backgroundColor با کد رنگی که ما از قبل آن را آماده کرده ایم برای تعویض رنگ استفاده می کنیم.

کد :

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SplashScreen(),
    );
  }
}
class SplashScreen extends StatefulWidget {
  const SplashScreen({Key? key}) : super(key: key);

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffF6f6f6),
    );
  }
}

کد رنگی که استفاده کرده ایم با رنگ سفید تفاوت زیادی ندارد و فقط مقدار به رنگ خاکستری نزدیک است.

نوبت به استفاده از body رسیده است، برای آن از ویجت Container که در child آن ، ویجت Center و مجددا  به child ویجت Center از Column برای  نمایش یک لوگو و دو متن به صورت عمودی استفاده می کنیم.

با این کد هایی که در برنامه قرار داده ایم به خروجی قابل توجه ی تا گذاشتن اولین تصویر دست پیدا نخواهیم کرد.

برای قرار دادن تصویر در children ویجت Column از Expanded وداخل child آن دستور (Image.asset()) که محل قرار گیری عکس می باشد استفاده می کنیم.

4- add کردن تصویر به برنامه :

برای این که شما بتواید از یک تصویر در برنامه خود استفاده کنید ، ابتدا باید آن عکس در برنامه شما وجود داشته باشد که نیاز به ساخت پوشه در Rut برنامه می باشد.

اگر با add کردن Image آشنا نیستید می توانی آموزش آن را در لینک قرار داده شده مشاهده کنید

در ادامه پایین Rut برنامه کلیک راست کرده ، بعد از انتخاب Newfolder یک نام برای آن که ما از assets استفاده کرده ایم به دل خواه خود انتخاب کنید.

سپس با کلیک راست مجدد ، ولی این بار روی پوشه ی assets که پوشه ی ساخته شده  با نام Images داخل آن قرار بگیرد استفاده می کنیم.

حال تصاویر مربوط به Whatsapp را که دانلود کر ده ایم را با درگ و رها کردن آن روی پوشه ی Images که داخل آن قرار بگیرد کار را پیش خواهیم برد.

با اتمام این عملیات باید تصاویر را به برنامه معرفی کنیم.

5- معرفی تصاویر به برنامه :

شما می توانید از دو روش این تصاویر را در pubspec.yaml معرفی کنید.

• روش اول :

در روش اول با وارد کردن عکس های خود به صورت مجزا در قسمت  assets ای که در pubspec.yaml وجود دارد مانند تصویر زیر می توانید کار را پیش ببرید.

• روش دوم :

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

سپس با برگشتن به main و قرار دادن دستور (/assets/images) ونام تصویر که انتخاب کرده اید در ادامه آن میان قسمت مربوطه اگر از برنامه خروجی بگیرید .

با خروجی بالا مواجه خواهید شد و با تغییر width و height آن که ما ازعدد 80 استفاده کرده ایم می شود تصویر را کوچک تر نمود.

کد :

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SplashScreen(),
    );
  }
}

class SplashScreen extends StatefulWidget {
  const SplashScreen({Key? key}) : super(key: key);

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0XffF6f6f6),
      body: Container(
        child: Center(
          child: Column(
            children: [
              Expanded(
                child: Image.asset(
                  'assets/images/new_logo.png',
                  width: 80,
                  height: 80,
                ),
              ),

]

6- ساخت متن های قرار گرفته در پایین :

برای ساخت دو متنی که می خواهیم آن ها را در پایین صحفه بگذاریم ازبلاک Expanded خارج می شویم و با ویجت Text با متن from  که دقیقا شبیه به صحفه ی اول Whatsapp باشد استفاده می کنیم، همین طور مقدار تغییرات در stayl  آن  ایجاد می کنیم.

حال می خواهیم لگو و متن ای که در زیر from قرار می گیرد را ایجا کنیم.

سپس با استفاده از یک SizedBox با height:10 فاصله ی بین این دو Text را مشخص می کنیم .

چون که متن و لوگو ما در کنار یکدیگر قرار دارند باید برای ساخت آن ها از ویجت Row با قرار دادن image و Text در children آن با دستوراتی که در تصویر زیر مشاهده می کنید استفاده خواهیم کرد.

برای وسط قرار دادن  لگو و متن که در گوشه ی سمت چپ قرار گرفته ، فقط کافی است که از دستور (mainAxisAlignment:MainAxisAlignment.center) در بدنه ویجت Row استفاده کنید.

کد :

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SplashScreen(),
    );
  }
}

class SplashScreen extends StatefulWidget {
  const SplashScreen({Key? key}) : super(key: key);

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0XffF6f6f6),
      body: Container(
        child: Center(
          child: Column(
            children: [
              Expanded(
                child: Image.asset(
                  'assets/images/new_logo.png',
                  width: 80,
                  height: 80,
                ),
              ),
              Text(
                'from',
                style: TextStyle(fontSize: 15),
              ),
              SizedBox(
                height: 10,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    'assets/images/new_meta_logo.png',
                    width: 25,
                    height: 25,
                  ),
                  Text(
                    'Meta',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Color.fromARGB(255, 51, 4, 100),
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

تا این قسمت همانطور که در خروجی نگاه می کنید تغریبا  توانسته ایم Ui این اپلیکیشن را بسازیم.

۷- تعیین زمان برای رفتن به صحفه اصلی :

همان گونه که در ابتدای این مقاله توضیح داده شد می خواهم Ui ای که ساخته ایم بعد از نمایش ، با تایمی که برای آن مشخص کرده ایم نویگیت شود به صفحه اصلی در برنامه.

برای ایجاد این تایمر به قسمت State کلاس Statefulwidget که در ابتدا کدها آن را به برنامه اضافه کردیم باز میگردیم.

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

سپس از Timer که در ابتدا دو مقدار را می خواهد استفاده می کنیم.

•  duration

به عنوان اولین مقدار که duration می باشد ، دستور (Duration(seconds:5)) برای مشخص کردن تایم در برنامه قرار می دهیم.

•  callback

استفاده از مقدار callback برای این است که برنامه ما بداند بعد از نمایش Ui با زمان قرار داده شده به کدام صفحه نویگیت شود که با قرار دادن ({}()) در جای این مقدار دستور (Navigator.pushReplacement) را در بدنه ({}) آن قرار می دهیم.

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

• Context

در این مقدار تغییری ایجاد نمی کنیم و اجازه می دهیم که در همان جا قرارداشته باشد.

• newRoute

اما به جای newRoute برنامه MaterialpageRoute  را وارد می کنیم که از یک builder تشکیل شده است و برای آن دستور (=>Home()(context)) را قرار می دهیم.

با قرار دادن این دستور مشاهده می کنید که Home استفاده شده از شما خطا گرفته است که دلیل آن برای ساخته نشدن این اسکرین آن می باشد

۸- ساخت اسکرین home :

برای ساخت این اسکرین به انتهای کدها می رویم در جایی که اسپلش اسکرین به پایان می رسد و از یک ویجت Statefulwidget دیگر با نام Home را در برنامه ایجاد می کنیم.

در ادامه میان قسمت build آن ، Scaffold را return می نماییم.

کد :

import 'dart:async';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SplashScreen(),
    );
  }
}

class SplashScreen extends StatefulWidget {
  const SplashScreen({Key? key}) : super(key: key);

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    Timer(Duration(seconds: 5), () {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(
          builder: (context) => Home(),
        ),
      );
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0XffF6f6f6),
      body: Container(
        child: Center(
          child: Column(
            children: [
              Expanded(
                child: Image.asset(
                  'assets/images/new_logo.png',
                  width: 80,
                  height: 80,
                ),
              ),
              Text(
                'from',
                style: TextStyle(fontSize: 15),
              ),
              SizedBox(
                height: 10,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    'assets/images/new_meta_logo.png',
                    width: 25,
                    height: 25,
                  ),
                  Text(
                    'Meta',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Color.fromARGB(255, 51, 4, 100),
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

الان اگر برنامه را یک بار stop و مجددا Run نمایید مشاهده می کنید که Ui ساخته شده با مکث پنج ثانیه به صفحه Home انتقال پیدا می کنید.

برای اصمینان از خروجی که بدانیم دقیقا برنامه ما به درستی عمل می کند می توانیم از یک ویجت Text با متن Home page در body ای که به Scaffold اختصاص می دهیم استفاده کنیم.

کد :

import 'dart:async';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SplashScreen(),
    );
  }
}

class SplashScreen extends StatefulWidget {
  const SplashScreen({Key? key}) : super(key: key);

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    Timer(Duration(seconds: 5), () {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(
          builder: (context) => Home(),
        ),
      );
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0XffF6f6f6),
      body: Container(
        child: Center(
          child: Column(
            children: [
              Expanded(
                child: Image.asset(
                  'assets/images/new_logo.png',
                  width: 80,
                  height: 80,
                ),
              ),
              Text(
                'from',
                style: TextStyle(fontSize: 15),
              ),
              SizedBox(
                height: 10,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    'assets/images/new_meta_logo.png',
                    width: 25,
                    height: 25,
                  ),
                  Text(
                    'Meta',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Color.fromARGB(255, 51, 4, 100),
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Home page'),
      ),
    );
  }
}

با خروجی مجددی که از برنامه می گیرید مشاهده می کنید که بعد از گذشت پنج ثانیه صفحه ای که Home page در آن قرار دارد به شما مانند تصویر بالا نمایش داده می شود.

خب دوستان به پایان قسمت آموزش پروژه محور Ui صفحه whatsapp در فلاتر - قسمت 1 رسیده ایم که در مقاله های بعدی به تکمیل آن خواهیم پرداخت در مقاله های آینده با ما همراه باشید و امیدواریم که این آموزش نیز مورد توجه شما قرار گرفته باشد.

برای تماشای ویدیو و مقاله های کامل این آموزش می توانید به سایت Amadaylearn.com مراجعه کنید.