1

I have a Master-Detail page for tablet.
I want to change the details page when I select an item in the list.
So I wrote code like this,

class AttendancesModel with ChangeNotifier {
  final int userId;
  AttendancesModel(this.userId);

  List<Attendance> attendances = [];

  // do initialize
}

class AttendancesPage extends StatelessWidget {
  final int userId;

  AttendancesPage(this.userId);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => AttendancesModel(userId),
      child: Consumer(
        builder: (_, model, __) {
          print('model.userId=${model.userId}')
          return Scaffold(
            // appbar, body, etc...
          );
        }
      )
    );
  }
}

But, model received by builder is always the same value.
Therefore, changing the user selection does not change the details screen.
How can I create new Model?

Thank you.

[Edit] The UserListPage like this will notify the user selection

class UserListModel with ChangeNotifier {
  List<User> users = [];
  int _selectedUserId;
  int get selectedUserId => _selectedUserId;
  set selectedUserId(int userId) {
    _selectedUserId = userId;
    notifyListeners();
  }
}

class UserListPage extends StatelessWidget {

  Widget build(BuildContext context) {
    return ChangeNotifierProvider.value(
      value: Provider.of<UserListModel>(context),
      child: Consumer(
        builder: (_, model, __) {
          return ListView.builder(
            itemBuilder: (_, i) {
              final user = model.users[i];
              return ListTile(
                title: Text(user.name),
                onTap: () => model.selectedUserId = user.id,
              );
            },
            itemCount: model.users.length
          );
        }
      )
    )
  }
}

class HomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => UserListModel(),
      child: HomePageBody()
    );
  }
}

class HomePageBody extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: <Widget>[
          SizedBox(width: 320, child: UserListPage()),
          ChangeNotifierProvider.value(
            value: Provider.of<UserListModel>(context),
            child: Consumer<UserListModel>(
              builder: (_, model, __) {
                return AttendancePage(model.selectedUserId);
              }
            )
          )
        ]
      )
    )
  }
}
kiyosuke
  • 71
  • 5
  • 1
    you are passing the same userId thats why you are getting same model – Jitesh Mohite May 19 '20 at 09:04
  • 1
    @jitsm555 Thank you for comment. I recreated AttendancesPage when I selected user in UserListPage. User's selection is notified by ChangeNotifier. I added details – kiyosuke May 19 '20 at 23:44

1 Answers1

0

in the AttendancesPage you are passing always the same userID. just for understanding, you want to print some info on AttendanceModel related to an userId right?

i made this. let see if it is usefull.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

class User {
  final int userId;
  final String name;

  User(this.userId, this.name);
}

class Attendance {
  final int attendanceId;
  final int userId;
  final String data;

  Attendance({
    this.attendanceId,
    this.data,
    this.userId,
  });
}

class UserListModel with ChangeNotifier {
  List<User> users = [
    User(15, "Rick"),
    User(14, "Bob"),
    User(12, "Lola"),
  ];
  int _selectedUserId;
  int get selectedUserId => _selectedUserId;

  void changeSelectedUserId(int userId) {
    _selectedUserId = userId;
    print(_selectedUserId);
    notifyListeners();
  }
}

class UserListPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Consumer<UserListModel>(
      builder: (_, model, __) {
        return ListView.builder(
            itemBuilder: (_, i) {
              final user = model.users[i];
              return ListTile(
                title: Text(user.name),
                onTap: () => model.changeSelectedUserId(user.userId),
              );
            },
            itemCount: model.users.length);
      },
    );
  }
}

class HomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => UserListModel(),
      child: HomePageBody(),
    );
  }
}

class HomePageBody extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: <Widget>[
          Expanded(child: UserListPage()),
          Consumer<UserListModel>(
            builder: (_, model, __) {
              return Expanded(
                child: ChangeNotifierProvider(
                  create: (_) => AttendancesModel(),
                  child: AttendancesPage(model.selectedUserId),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

class AttendancesModel with ChangeNotifier {
  List<Attendance> attendances = [
    Attendance(attendanceId: 1, userId: 12, data: "Attendance1"),
    Attendance(attendanceId: 2, userId: 15, data: "Attendance2"),
    Attendance(attendanceId: 3, userId: 14, data: "Attendance3"),
  ];

  Attendance findByUserId(int userId) {
    return attendances.firstWhere((element) => element.userId == userId);
  }
}

class AttendancesPage extends StatelessWidget {
  final int userId;

  AttendancesPage(this.userId);

  @override
  Widget build(BuildContext context) {
    final attendance =
        Provider.of<AttendancesModel>(context).findByUserId(userId);
    return Scaffold(
      body: Center(
        child: Text(
            "${attendance.attendanceId} - ${attendance.userId} - ${attendance.data}"),
      ),
    );
  }
}