ورود و عضویت
0
سبد خرید شما خالی است
0
سبد خرید شما خالی است

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

2 دیدگاه

یکی از الگوهای برنامه نویسی که امروزه مورد توجه اکثر توسعه دهندگان قرار گرفته است برنامه نویسی 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,
            ),
          )
        ],
      ),
    );
  }

}

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

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

2 پاسخ به “آموزش استفاده از Rxdart در وب سرویس”

  1. محمد باقر فکوری گفت:

    عالی بود ولی چرا این پروژه رو رو گیت نمیزارین اونجوری خیلی بهتره

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Hesam
15 جولای 2020
آموزش فارسی فلاتر
آموزش فارسی flutter