فلاتر

آموزش استفاده از Rxdart در وب سرویس

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

در مطالب قبلی آموزش فلاتر در وبسایت درباره نحوه کار کردن با Rxdart و Stream صحبت کردیم اما در قالب یک پروژه ساده بررسی کردیم که به درخواست اکثر دوستان در این آموزش از یک مثال واقعی تر استفاده خواهیم کرد.

کتابخانه Rxdart در واقع یک سری امکانات به Stream اضافه می کند.

بنابراین استفاده این دو پکیج باید همراه باهم باشد.

همچنین برای بخش ارتباط با وبسرویس در فلاتر قصد داریم که از کتابخانه DIO استفاده کنیم.

آموزش فلاتر

شروع پروژه

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

  provider: ^4.0.2
  rxdart: ^0.23.1
  bloc: ^3.0.0
  dio: ^3.0.9

  characters: ^1.0.0

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

https://jsonplaceholder.typicode.com/todos

ساخت مدل

در ادامه با توجه خروجی جیسونی که از وب سرویس دریافت میکنیم کلاس مدل زیر را برای لیست Todos طراحی میکنیم.

class Todos {


  final int id, userId;
  final String title;

  Todos(this.id, this.userId, this.title);


  Todos.fromJson(Map<String, dynamic> json)
      :
        id = json["id"],
        userId = json["userId"],
        title = json["title"];

}

یک کلاس TodosResponse هم برای تبدیل کردن لیست جیسون به لیستی از آبجکت ها ایجاد میکنیم.

class TodosResponse{

  final List<Todos> todos;
  final String error;

  TodosResponse(this.todos, this.error);

  TodosResponse.fromJson(List<dynamic> json):

      todos = (json as List).map((e) => new Todos.fromJson(e)).toList(),
  error = "";


  TodosResponse.withError(String errorValue):
      todos = List(),
  error = errorValue;
}

در مرحله بعدی کلاسی تحت عنوان TodoRepository ایجاد میکنیم و عملیات ارسال درخواست به وب سرویس و دریافت اطلاعات را در آن پیاده سازی میکنیم.

class TodoRepository{


  final Dio _dio = Dio();

  Future<TodosResponse> getTodos() async{

    var url = "https://jsonplaceholder.typicode.com/todos";
    try{
      Response response = await _dio.get(url);
      return TodosResponse.fromJson(response.data);
    } catch(error,stack){
      print("Exception: $error");
      return TodosResponse.withError("$error");
    }
  }
}

بخشی اصلی کار ما در کلاسی به اسم TodosBloc قرار دارد.

class TodosBloc{
  final TodoRepository _repository = TodoRepository();
      final BehaviorSubject<TodosResponse> _subject =
          BehaviorSubject<TodosResponse>();



      getTodos() async{
         TodosResponse response = await _repository.getTodos();
         _subject.sink.add(response);
      }

      void drainStream(){_subject.value = null; }

      @mustCallSuper
      void dispose() async{
        await _subject.drain();
        _subject.close();
      }

      BehaviorSubject<TodosResponse> get subject => _subject;


}

final todosbloc = TodosBloc();

در این کلاس یک BehaviorSubject داریم که اطلاعات درون آن ذخیره می شود.

برای اینکه اطلاعات بیشتری درباره نحوه کار استریم و انواع سابجکت داشته باشید میتونید به لینک زیر مراجعه کنید.

نحوه استفاده از RxDart به همراه الگوی بلاک در فلاتر

در نهایت کد های بخش رابط کاربری صفحه به شکل زیر می باشد.

class TodosHome extends StatefulWidget {
  @override
  _TodosHomeState createState() => _TodosHomeState();
}

class _TodosHomeState extends State<TodosHome> {


  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    todosbloc.getTodos();
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: todosbloc.subject.stream,
      builder: (context,AsyncSnapshot<TodosResponse> snapshot){

        if(snapshot.hasData){

            if(snapshot.data.error != null && snapshot.data.error.length >0){
              return _buildErrorWidget(snapshot.data.error);
            }
            return Container(
              height: 700.0,
              child: _buildHomdeWidget(snapshot.data,context),
            );


        } else if ( snapshot.hasError){
          return _buildErrorWidget(snapshot.data.error);
        }
        else{
          return _buildLoadingWidget();
        }
      },
    );
  }


  Widget _buildHomdeWidget(TodosResponse data, var context){


    List<Todos> todoslit = data.todos;

    if(todoslit.length==0){
      return Container(
        width: MediaQuery.of(context).size.width,
        child: Column(

          children: [
            Text("No More Todos....")
          ],
        ),
      );
    }else{
      return Center(
        child:  ListView.builder(

          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          itemCount: todoslit.length,
          itemBuilder: (context,index){

            return Container(
              child: Text(todoslit[index].title),
              margin:  const EdgeInsets.all( 10.0),
            );
          },
        ),
      );
    }
  }


  Widget _buildErrorWidget(String error){

    return Center(
      child: Column(
        children: [
          Text("Error...")
        ],
      ),
    );
  }

  Widget _buildLoadingWidget(){

    return Center(
      child:  Column(
        children: [
          SizedBox(
            height: 25.0,
            width: 25.0,
            child: CircularProgressIndicator(

              valueColor: new AlwaysStoppedAnimation<Color>(Colors.red)
              ,
              strokeWidth: 4.0,
            ),
          )
        ],
      ),
    );
  }

}

برای توضیحات بیشتر و بهتر پیشنهاد میکنم حتما از ویدیوی آموزشی قرار داده شده در ابتدای این پست استفاده کنید.

ممنون که این ویدیو آموزشی فلاتر را تماشا کردید.

Hesam

View Comments

Recent Posts

گیتهاب اکشن چیست؟ آموزش استفاده از گیتهاب اکشن در برنامه نویسی فلاتر

گیتهاب اکشن GitHub Actions یکی از ابزارهای گیتهاب است که به شما کمک می‌کنه تا…

2 روز ago

آموزش افزایش سرعت اجرای وب اپلیکیشن های فلاتر

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

4 هفته ago

آموزش جامع انتشار اپلیکیشن اندروید و فلاتر در فروشگاه گوگل پلی Google play

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

2 ماه ago

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

طراحی رابط کاربری اپلیکیشن پادکست خود را با استفاده از این کیت توسعه UI/UX فلاتر…

2 ماه ago

فایربیس چیست؟ معرفی سرویس ابری Firebase و کاربردهای آن

فایربیس، پلتفرمی قدرتمند از شرکت گوگل برای توسعه و مدیریت برنامه‌های موبایل و وب است.…

2 ماه ago

آموزش پیاده سازی Method Channel در فلاتر + فیلم

فلاتر یک فریم ورک برنامه نویسی چندسکویی است که این امکان را برای برنامه نویس…

3 ماه ago