How to load data in the body property using flutter + (bloc) Pattern

Issue

Hello friends,

I have been learning to use flutter for weeks, I am creating an app that I develop as I learn to program in flutter.

My idea is to be able to follow the Pattern (BLoC). What I want to do now is like being able to load the movie data list into the home.dart file in the body property

I appreciate your help!

home.dart

import 'package:eva_icons_flutter/eva_icons_flutter.dart';
import 'package:flutter/material.dart';
import 'package:skyshowapp/styles/theme.dart' as Style;


class HomeScreen extends StatefulWidget{
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Style.Colors.mainColor,
      appBar: AppBar(
        backgroundColor: Style.Colors.mainColor,
        centerTitle: true,
        leading: Icon(EvaIcons.menu2Outline , color: Colors.white),
        title: Text("SKYSHOW APP"),
        actions: <Widget>[
          IconButton(icon: Icon(EvaIcons.searchOutline , color: Colors.white,), onPressed: null,)
        ],
      ),
      body: ListView(
        children: <Widget>[

        ],
      ),
    );
  }
}

movie_bloc.dart

import 'package:rxdart/subjects.dart';
import 'package:skyshowapp/model/movie.dart';
import 'package:skyshowapp/repository/repository.dart';

class MovieListBloc{
  final MovieRepository _repository = new MovieRepository();
  final BehaviorSubject<MovieRootClass> _subject = new BehaviorSubject<MovieRootClass>();

  getMovies() async{
    MovieRootClass response = await _repository.getMovies();
    _subject.sink.add(response);
  }

  dispose(){
    _subject.close();
  }

  BehaviorSubject<MovieRootClass> get subject => _subject;
}

final movieBloc = new MovieListBloc();
class MovieRootClass {
  List<Movies> movies;

  MovieRootClass({this.movies});

  MovieRootClass.fromJson(Map<String, dynamic> json) {
    if (json['movies'] != null) {
      movies = new List<Movies>();
      json['movies'].forEach((v) {
        movies.add(new Movies.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.movies != null) {
      data['movies'] = this.movies.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class Movies {
  String id;
  String title;
  String sinopsis;
  String poster;
  String rating;
  String quality;
  String year;
  List<Extra> extra;

  Movies(
      {this.id,
      this.title,
      this.sinopsis,
      this.poster,
      this.rating,
      this.quality,
      this.year,
      this.extra});

  Movies.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    title = json['title'];
    sinopsis = json['sinopsis'];
    poster = json['poster'];
    rating = json['rating'];
    quality = json['quality'];
    year = json['year'];
    if (json['extra'] != null) {
      extra = new List<Extra>();
      json['extra'].forEach((v) {
        extra.add(new Extra.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['title'] = this.title;
    data['sinopsis'] = this.sinopsis;
    data['poster'] = this.poster;
    data['rating'] = this.rating;
    data['quality'] = this.quality;
    data['year'] = this.year;
    if (this.extra != null) {
      data['extra'] = this.extra.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

// Extra class .....

Solution

You can use StreamBuilder widget which takes in a stream, and rebuilds itself when ever new data is added to the stream.

StreamBuilder(
  stream: subject.stream,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return ListView.builder(
        itemCount: snapshot.data.movies.length,
        itemBuilder: (BuildContext context, int idnex) {
          return ListTile(
            title: Text(snapshot.data.someProperty),
          );
        },
      );
    }
    return const CircularProgressIndicator();
  },
);

Answered By – Ali Alizadeh

Answer Checked By – Robin (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *