Flutter ListView itembuilder won't show anything. Why? - flutter

I wanted to display multiple ListTiles using the ListView.itembuilder in Flutter. I did it, but the screen is still blank. Tried hot reloading as well as running the app twice. What's wrong in the code?
P.S: The List is going to appear in my TabBarView that I created earlier. Also posting the snipper of the TabBarView.
ListView code:
class SportBets extends StatefulWidget {
#override
_SportBetsState createState() => _SportBetsState();
}
class _SportBetsState extends State<SportBets> {
final sportList = [
"Basketball",
"Football",
"Volleyball",
];
#override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: sportList.length,
itemBuilder: (context, index){
ListTile(
title: Text(sportList[index], style: TextStyle(fontSize: 20.0, color: Colors.black),),
trailing: IconButton(
icon: Icon(Icons.arrow_forward_ios),
color: Colors.blue,
onPressed: (){}
),
leading: CircleAvatar(child: Icon(Icons.wb_sunny),radius: 18.0,),
);
}
);
}
}
TabBarView Code:
body: TabBarView(
children: <Widget>[
Center(
child: Text(
"Highlights Page here",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
),
Center(
child: Text(
"Casino Page here",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
),
Center(
child: Text(
"Promotions Page here",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
),
SportBets(),
],
),

Some errors you need to fix
Add a `return` statement in the `itemBuilder` of `ListView`
Wrap your `TabBarView` with a `DefaultTabContoller` and set `DefaultTabContoller`'s length as 4 as you have 4 tabs.

Related

Adding multiple content in TabBarView in Flutter

I am trying to make multiple contents in a TabBarView of flutter like adding a mini instruction and a start button to navigate to the game screen but it keeps giving me error like the
"Error: No named parameter with the name 'children'"
here's my code
import 'package:flutter/material.dart';
import 'DiceHome.dart';
import 'HclcHome.dart';
import 'HotHome.dart';
import 'JnpHome.dart';
import 'icons.dart';
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 4,
child: Scaffold(
appBar: AppBar(
title: Text('Pocket Money:'),
bottom: TabBar(
tabs: [
Tab(icon: Icon(MyFlutterApp.dice)), //DiceTab
Tab(icon: Icon(MyFlutterApp.hand)), //JnPTab
Tab(icon: Icon(MyFlutterApp.clovers_card)), //HclcTab
Tab(icon: Icon(MyFlutterApp.coins)), //HotTab
], //tabs
), //TabBar
), //appbar
drawer: Drawer(), //drawer
body: TabBarView(
children: const <Widget>[
Center(
children: <Widget>[
Text(
'Dice Game',
style: TextStyle(
fontSize: 30.0,
), //TextStyle
), //Text
SizedBox(height: 30.0),
Text(
'Guess the next roll of the dice',
style: TextStyle(
fontSize: 15.0,
), //TextStyle
), //Text
Text(
'If you guessed right yo win',
style: TextStyle(
fontSize: 15.0,
), //TextStyle
), //Text
SizedBox(height: 30.0),
], //Children
), //Center,
Center(child: Text('loading...')), //Center
Center(child: Text('loading...')), //Center
Center(child: Text('loading...')), //Center
], //children
), //TabBarView
), //Scaffold
), //DefaultTabController
); //MaterialApp
} //build
}
My goal is to make an app with multiple mini games with the use of tab bar as my game selector for fewer screen codes, is it possible with tab bar view?
Center takes a child (a single widget) not children (a list of widgets). You should use row, column, stack, etc. (any of the widgets that take children) if you wish to display multiple widgets within center. Try this:
...
Center(
child: Column(
children: <Widget>[
Text(
'Dice Game',
style: TextStyle(
fontSize: 30.0,
), //TextStyle
), //Text
SizedBox(height: 30.0),
Text(
'Guess the next roll of the dice',
style: TextStyle(
fontSize: 15.0,
), //TextStyle
), //Text
Text(
'If you guessed right yo win',
style: TextStyle(
fontSize: 15.0,
), //TextStyle
), //Text
SizedBox(height: 30.0),
], //Children
), //Column
), //Center
...

Unable to render list view builder even when using expanded

I have the following where when I run it, I get the following error:
RenderFlex children have non-zero flex but incoming height constraints
are unbounded. RenderBox was not laid out: RenderRepaintBoundary#ad336
NEEDS-LAYOUT NEEDS-PAINT
The issue seems to be coming from my ListView.builder.
The general suggestion from past questions such as ListView.builder gives error: RenderBox was not laid out
has been to wrap it in an Expanded widget which I have done. But I am still seeing above error.
Could I please get some advice as to what I am doing wrong please. Thanks.
Pasting the whole file here in case there is some red herring going on.
The Expanded and ListView.builder section is at the end.
import 'package:flutter/material.dart';
import 'account_details.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Color(0xff020B2A),
appBar: AppBar(
backgroundColor: Color(0xff020B2A),
centerTitle: true,
title: Column(
children: [
Text(
'Account',
style: TextStyle(
fontSize: 12,
),
),
Text(
'Card Ending - 00000',
style: TextStyle(
fontSize: 9,
letterSpacing: 1.1,
),
),
],
),
actions: [
Padding(
padding: const EdgeInsets.only(right: 8),
child: Icon(Icons.messenger_outline),
),
],
),
body: Column(
children: [
Center(
child: Column(
children: [
SizedBox(height: 30),
Text('Good Evening', style: TextStyle(
color: Colors.white,
fontSize: 12,
),),
SizedBox(height: 18),
Text('NAME', style: TextStyle(
color: Colors.white,
fontSize: 28,
),),
SizedBox(height: 18),
Text('Member Since \'18\'', style: TextStyle(
color: Colors.white70,
fontSize: 10,
),),
],
),
),
Column(
children: [
SizedBox(height: 30),
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(left: 16.0, bottom: 16.0),
child: Text('Account', style: TextStyle(
color: Colors.white70,
fontSize: 16,
),),
),
),
Expanded(
child: ListView.builder(
shrinkWrap: true, // added after suggestion. same error
itemCount: accountTitles.length,
itemBuilder: (context, index) {
return ListTile(
onTap: (){},
leading: Icon(accountTitles[index].leadingIcon),
title: Text(accountTitles[index].title),
trailing: Icon(accountTitles[index].trailingIcon),
);
},
),
),
],
),
],
),
),
);
}
}
The test data accountTitles coming from following:
import 'package:flutter/material.dart';
class Info {
final String title;
final IconData leadingIcon;
final IconData trailingIcon;
Info({this.title, this.leadingIcon, this.trailingIcon});
}
List<Info> accountTitles = [
Info(title: 'A', leadingIcon: Icons.chevron_left, trailingIcon: Icons.chevron_right),
Info(title: 'B', leadingIcon: Icons.chevron_left, trailingIcon: Icons.chevron_right),
Info(title: 'C', leadingIcon: Icons.chevron_left, trailingIcon: Icons.chevron_right),
];
Your scrollable (ListView in this case) is rendered inside two nested Column so the general advice (use Expanded) is correct but you need to do it twice: both for the inner column and the list view. See it in action here https://dartpad.dev/855cbaf9d055104a04824b0f3bb5413d?null_safety=true

Is there a way I can add widgets to my list in flutter after a .toList() call?

I need to add another item to my list in a flutter app. The problem comes in the children: quotes.map((quote) => quoteTemplate(quote)).toList() part. I have tried adding a text widget after it to try and test it. However, I constantly get error. The error says I cannot add list to Widgets. My full code is.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import "quote.dart";
void main() => runApp(MaterialApp(
home: QuoteList(),
));
class QuoteList extends StatefulWidget {
#override
_QuoteListState createState() => _QuoteListState();
}
class _QuoteListState extends State<QuoteList> {
int index = 1;
List <Quote> quotes = [
Quote(text: "1. It always seems impossible until it's done.", author: "Nelson Mandela", date: "1954"),
Quote(text: "2. Don't watch the clock; do what it does. Keep going.", author: "Sam Levenson", date: "1985"),
Quote(text: "3. Live life to the fullest, and focus on the positive.", author: "Matt Cameron", date: "1965"),
];
Widget quoteTemplate(quote) {
return Card(
margin: EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 0),
elevation: 5,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
quote.text,
style: TextStyle(
fontSize: 18.0,
color: Colors.grey[600],
),
),
SizedBox(height: 17.0),
Text(
quote.author,
style: TextStyle(
fontSize: 11.0,
color: Colors.grey[700],
),
),
SizedBox(height: 17.0),
Text(
quote.date,
style: TextStyle(
fontSize: 11.0,
color: Colors.grey[750],
),
),
],
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Quote App",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
centerTitle: true,
backgroundColor: Colors.green,
),
backgroundColor: Colors.white,
body:
Center(
child: Column(
children: quotes.map((quote) => quoteTemplate(quote)).toList(),
//quotes.map((quote) => quoteTemplate(quote)).toList().toString(),
),
),
);
}
}
You can append to an existing list using the ... syntax:
Column(
children: [
...quotes.map((quote) => quoteTemplate(quote)).toList(),
Text(),
Text(),
],
),

How to Automatically Scroll down when expanding ExpansionTile

I am making my first Flutter App; enjoying it thus far. One annoying thing that I can not quite put my finger on, is that I have some ExpandedTiles, like so:
However, when the tile is expanded, the screen stays in the same position; like so:
What I would like, is if the app is scrolled down aa little bit when the ExpandedView is expanded.
I found this previous question, How to scroll an ExpansionTile / Listview when a tile is expanded? but that is a little different in that it just creates a list of the same items every time. I want the same functionality, but for 3 or 4 unique lists.
Widget build(BuildContext context) {
final title = 'Lunch Menu';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body:
ListView(
children:
<Widget>[
ListTile(
subtitle: Image.asset('assets/images/lunch-logo.jpg'),
title: ElevatedButton(
child: Text('Back'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomeRoute()),
);
},
),
),
ListTile(
//leading: Image.asset('assets/images/lunch-logo.jpg'),
subtitle: Text('Enjoy our Lunch Options!',
style: TextStyle(
fontSize: 18.0,
color: Colors.blue,
fontWeight: FontWeight.w600,
) ,
textAlign: TextAlign.center ,
),
),
ExpansionTile(
leading: Text(
'Starters',
style: TextStyle(
fontSize: 18.0,
color: Colors.blue,
fontWeight: FontWeight.w600,
),
),
children:<Widget>[ ListTile(
leading: Image.asset('assets/images/food/image1.png'),
title: Text('Title1'),
isThreeLine: true,
subtitle: Text('Description 1') ,
),ListTile(
leading: Image.asset('assets/images/food/image2.png'),
title: Text('Title2'),
isThreeLine: true,
subtitle: Text('Description2') ,
),
Would appreciate if someone can give me a pointer on how to implement the scroll controller correctly.
You can create your own ScrollController and pass it to ListView, then when ExpansionTile expands, use onExpansionChanged to animate the controller and scroll a bit down
class ListViewExample extends StatefulWidget {
ListViewExample({Key key}) : super(key: key);
#override
_ListViewExampleState createState() => _ListViewExampleState();
}
class _ListViewExampleState extends State<ListViewExample> {
final ScrollController scroll = ScrollController();
#override
void dispose() {
scroll.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return ListView(
controller: scroll,
children: [
ListTile(
subtitle: Image.asset('assets/images/lunch-logo.jpg'),
title: ElevatedButton(
child: Text('Back'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomeRoute()),
);
},
),
),
ListTile(
//leading: Image.asset('assets/images/lunch-logo.jpg'),
subtitle: Text('Enjoy our Lunch Options!',
style: TextStyle(
fontSize: 18.0,
color: Colors.blue,
fontWeight: FontWeight.w600,
) ,
textAlign: TextAlign.center ,
),
),
ExpansionTile(
leading: Text(
'Starters',
style: TextStyle(
fontSize: 18.0,
color: Colors.blue,
fontWeight: FontWeight.w600,
),
),
onExpansionChanged: (value) {
if (value)
scroll.animateTo(120, //this is a hardcoded value, would need some tweaking
duration: const Duration(milliseconds: 300),
curve: Curves.linear);
},
children: [
... //Your widgets
],
)
],
);
}
}
onExpansionChanged returns true when its expanding and false when collapsing, you can use those values and check the scroll offset to know if you need to animate the scroll to move downward
try this if you use listview and other scrollable, very helpfully
https://medium.com/flutter-community/flutter-how-to-scroll-an-expansiontile-when-it-is-expanded-ad706cfb80a6

Impementing menu for flutter web in mobile

Hello I recently started a project on flutter web and am having problems implementing Menu for Mobile view in the NavBar.
Start.
This is what i need when i click the menu icon.
Onclick
The specific kind of widget you are looking for is called a drawer. You may visit
https://flutter.dev/docs/cookbook/design/drawer for full details. Let me also give an example of a drawer code.
class Trial extends State<State1> {
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Center(
child: Text(
'Choose an Option:',
style: TextStyle(
fontSize: 30,
),
),
),
decoration: BoxDecoration(
color: Colors.blue,
),
),
Padding(
child: Card(
child: ListTile(
leading: Icon(
Icons.add,
size: 35,
),
title: Text(
'Increment by 2',
style: TextStyle(
fontSize: 20,
),
textAlign: TextAlign.center,
),
onTap: () {
setState(() {
increment = 2;
Navigator.pop(context);
});
},
),
),
padding: EdgeInsets.all(9.0),
),
],
),
),
);
}
Please note. This is not the specific code that was asked for. I have only provided a neat example that may be tweaked to arrive at the necessary result.