fanjavaid
fanjavaid

Reputation: 1738

UI not updated when Modal class property is updated in Flutter

I am new in Flutter and I have a problem when rendering UI in List. The UI does not render new data.

Basically, my list hold datas with type Movie.

class Movie {
  Movie(int id, String title, String thumbnail, String director,
      [double rating, double price, double discountPrice]) {
    this.id = id;
    this.title = title;
    this.thumbnail = thumbnail;
    this.director = director;
    this.rating = rating;
    this.price = price;
    this.discountPrice = discountPrice;
  }

  int id;
  String thumbnail;
  String title;
  String director;
  double rating = 0;
  double price = 0;
  double discountPrice = 9000;
}

At the first time development i create that class without discountPrice, then in second iteration i added it. But in Hot Reload and Restart the discountPrice won't updated to the UI.

Here is my Widget

class MovieInformation extends StatelessWidget {
  final Movie movie;

  MovieInformation({this.movie}) : super(key: ObjectKey(movie));

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 140,
      decoration: BoxDecoration(
        borderRadius: const BorderRadius.all(
          const Radius.circular(8),
        ),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Color(0x90d5e0e8),
            offset: Offset(0, 10),
            blurRadius: 16,
          )
        ],
      ),
      padding: const EdgeInsets.only(left: 110),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(top: 8, bottom: 12, left: 16),
                child: Text(
                  '\$${movie.price}',
                  style: TextStyle(fontSize: 12),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 8, bottom: 12, left: 4),
                child: Text(
                  '\$${movie.discountPrice}',
                  style: TextStyle(
                    fontSize: 12,
                    color: Colors.black45,
                    decoration: TextDecoration.lineThrough,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

And here is my Main class

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Color(0xFFF8F8F8),
      ),
      home: Scaffold(
        appBar: AppBar(
          elevation: 0,
          leading: IconButton(
            icon: Icon(Icons.chevron_left),
            onPressed: () => {},
          ),
        ),
        body: HomePage(
          movies: [
            Movie(
              1,
              'The Astronaut',
              "https://d1csarkz8obe9u.cloudfront.net/posterpreviews/space-movie-poster-design-template-18133e937d93002c68b4649ea234d75f_screen.jpg",
              'John Doe',
              4.5,
              100, // discountPrice is omitted which expected to use default value : 9000
            ),
          ],
        ),
      ),
    );
  }
}

I build my list using this snippet

Expanded(
  child: ListView.builder(
    itemCount: movies.length,
    itemBuilder: (context, index) {
      return MovieItem(
        movie: movies[index],
      );
    },
  ),
)

Here is the preview: For personal usage and training.Source

App Preview

Upvotes: 1

Views: 168

Answers (1)

back_to_square
back_to_square

Reputation: 106

In the Movie Constructor, you have used discountPrice as an optional positional parameter. When no values are passed to optional positional parameters, the default value is null.

So, this.discountPrice = discountPrice here null gets assigned to discountPrice. ( Member Variable ) // This overrides your value of 9000.

The Solution is to supply default values to optional positional parameters as shown :

class Movie {
  Movie(int id, String title, String thumbnail, String director,
      [double rating, double price, double discountPrice = 9000]) {
    this.id = id;
    this.title = title;
    this.thumbnail = thumbnail;
    this.director = director;
    this.rating = rating;
    this.price = price;
    this.discountPrice = discountPrice;
  }

  int id;
  String thumbnail;
  String title;
  String director;
  double rating = 0;
  double price = 0;
  double discountPrice;
}

Upvotes: 1

Related Questions