flutterriverpodflutter-listview
Trying to build a ListView using Riverpod as state watcher
My goal is to have a ListView.builder, which updates, whenever the state changes. My state depends on a HTTP request. I manage to make my request successfully, I get a response and make it a List. For some reason, I do not get UI update on my screen and everything used to work, it got broken after trying to make the ListView build dynamically with the response.
So this is my main file, where I have added the provider scope:
void main() {
runApp(const ProviderScope(child: MainApp()));
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return const ProviderScope(
child:
MaterialApp(debugShowCheckedModeBanner: false, home: MainPage()));
}
}
And this is my main page:
class MainPage extends ConsumerWidget {
const MainPage({super.key});
@override
Widget build(BuildContext context, ref) {
// provider
final data = ref.watch(roomDataProvider);
final roomIDController = TextEditingController();
// UI screen size
Size size = MediaQuery.of(context).size;
double deviceWidth = size.width;
double deviceHeight = size.height;
return Scaffold(
backgroundColor: bluePrimary,
body: data.when(
data: (data) {
List<RoomModel> roomList = data.map((room) => room).toList();
SafeArea(
child: Container(
padding:
const EdgeInsets.symmetric(horizontal: 36, vertical: 16),
child: Column(
//crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
iconSize: deviceWidth * 0.09,
icon: const Icon(Icons.person_outline,
color: orangePrimary),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.add,
color: orangePrimary,
),
iconSize: deviceWidth * 0.09,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
const CreateRoomScreen()),
);
},
)
],
),
SizedBox(height: deviceHeight * 0.04),
Align(
alignment: Alignment.centerLeft,
child: Text("Watch",
style: TextStyle(
fontFamily: 'Chalet',
fontSize: deviceWidth * 0.12,
color: orangePrimary,
fontWeight: FontWeight.w300,
height: deviceHeight * 0.001)),
),
Align(
alignment: Alignment.centerLeft,
child: Text("With",
style: TextStyle(
fontFamily: 'Chalet',
fontSize: deviceWidth * 0.12,
color: whitePrimary,
fontWeight: FontWeight.w300,
height: deviceHeight * 0.001)),
),
Align(
alignment: Alignment.centerLeft,
child: Text("Me",
style: TextStyle(
fontFamily: 'Chalet',
fontSize: deviceWidth * 0.12,
color: orangePrimary,
fontWeight: FontWeight.w300,
height: deviceHeight * 0.001)),
),
SizedBox(height: deviceHeight * 0.04),
Align(
alignment: Alignment.centerLeft,
child: Text("Join room",
style: TextStyle(
fontFamily: 'Chalet',
fontSize: deviceWidth * 0.07,
color: whitePrimary,
fontWeight: FontWeight.w100,
height: deviceHeight * 0.001)),
),
SizedBox(height: deviceHeight * 0.008),
// email textField
SizedBox(
width: MediaQuery.of(context).size.width * 0.85,
child: TextField(
controller: roomIDController,
decoration: InputDecoration(
filled: true,
fillColor: whitePrimary,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none),
hintText: 'Enter room ID to join it',
hintStyle: const TextStyle(
color: Color.fromARGB(255, 174, 173, 173))),
),
),
SizedBox(height: deviceHeight * 0.016),
Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
backgroundColor: orangePrimary,
child: const Icon(Icons.arrow_forward_ios_rounded,
color: whitePrimary),
onPressed: () {},
),
),
SizedBox(height: deviceHeight * 0.020),
Align(
alignment: Alignment.centerLeft,
child: Text("My rooms",
style: TextStyle(
fontFamily: 'Chalet',
fontSize: deviceWidth * 0.07,
color: whitePrimary,
fontWeight: FontWeight.w100,
height: deviceHeight * 0.001)),
),
SizedBox(height: deviceHeight * 0.014),
// Display horizontal scroll rooms
Align(
alignment: Alignment.centerLeft,
child: SizedBox(
width: deviceWidth,
child: SizedBox(
height: deviceWidth * 0.56,
width: deviceWidth * 0.42,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: roomList.length,
itemBuilder: (context, index) {
return Stack(children: [
Container(
height: deviceWidth * 0.8,
width: deviceWidth * 0.42,
margin: const EdgeInsets.symmetric(
horizontal: 3),
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.circular(10)),
child: ListTile(
title: Text(roomList[index].uniqueID),
subtitle:
(Text(roomList[index].uniqueID)),
)),
InkWell(
child: Container(
height: deviceWidth * 0.4,
width: deviceWidth * 0.42,
margin: const EdgeInsets.symmetric(
horizontal: 3),
decoration: BoxDecoration(
color: orangePrimary,
borderRadius:
BorderRadius.circular(10),
boxShadow: const [
BoxShadow(
color: Colors.black,
offset: Offset(0, 5),
blurRadius: 10)
]),
child: Image.asset(
"assets/Logo.png"),
),
onTap: () {},
)
]);
},
),
),
),
)
]),
));
return null;
},
error: (err, s) => Text(err.toString()),
loading: () => const Center(
child: CircularProgressIndicator(),
)));
}
}
and that is how the roomProvider looks like, it basically calls my http request there
final roomDataProvider = FutureProvider<List<RoomModel>>((ref) async {
return ref.watch(roomProvider).getUserRooms();
});
The roomList looks as following 
I cannot see, where it is breaking at and no error shows up but my screen does not build.
Solution
In your code:
return Scaffold(
backgroundColor: bluePrimary,
body: data.when(
data: (data) {
List<RoomModel> roomList = data.map((room) => room).toList();
SafeArea( // --> This is the problem
in the when case, you need to explicitly return:
return SafeArea(...)
without a return statement, it doesn't know what widget to display once it has the data
- How to write static classes in dart?
- Use dynamic (variable) string as regex pattern in dart
- flutter doctor doesn't work on neither Command Prompt or PowerShell window?
- flutter: geolocator isnt working, Make sure at least ACCESS_FINE_LOCATION or ACCESS_COARSE_LOCATION are defined in the manifest
- How can i put button inside Textformfield?
- Can I wrap the MaterialApp widget with the Provider?
- Flutter - Textfield lose focus when text is visible
- error while build iOS app in Xcode : Sandbox: rsync.samba (13105) deny(1) file-write-create, Flutter failed to write to a file
- How to go with this error "The method '/' was called on null"
- Writing to FireStore - how to show error when fails (if no network)
- How do I use Provider between Widgets?
- flutter pub run build_runner build is Deprecated
- How to pass environment variables to String.fromEnvironment() when running dart run build_runner
- Build falied after flutterfire is configured
- Show Icon after TextForm Field
- How to pass multiple arguments in named route in flutter
- Flutter Text inside a container, RenderFlex overflowed by pixels on the right
- How to remove bottom appbar border
- change popupmenubutton size(width and height)
- ext.kotlin_version = <'latest version'> error on Flutter
- Add separator color to null in ExpandableTile flutter
- proper way to get widget height in SafeArea
- Flutter state variable pass to widget
- How to access a folder on Windows using Flutter
- Looping through Firestore Documents to Display Elements
- Flutter: PlatformException when trying to get Google Sign-In access token
- Set TextFromField style in Theme
- Tree-Shaking "MaterialIcons-Regular.otf" on flutter build
- Target of URI doesn't exist: 'package:flutter_gen/gen_l10n/gallery_localizations.dart'
- Flutter: include of non-modular header inside framework module 'firebase_core.FLTFirebasePlugin'