Tab bar view error as used the same GlobalKey multiple times - dart

I'm using Flutter. I have a simple app with 3 tabs. There is a RefreshIndicator in each tab with a ListView. The rows are built in another method. This is the code:
#override
Widget build(BuildContext context) {
final GlobalKey<RefreshIndicatorState> _RIKey1 = new GlobalKey<RefreshIndicatorState>();
final GlobalKey<RefreshIndicatorState> _RIKey2 = new GlobalKey<RefreshIndicatorState>();
final GlobalKey<RefreshIndicatorState> _RIKey3 = new GlobalKey<RefreshIndicatorState>();
debugPrint(_RIKey1.toString());
debugPrint(_RIKey2.toString());
debugPrint(_RIKey3.toString());
return new Scaffold(
body: new DefaultTabController(
length: 3,
child: new Scaffold(
appBar: new AppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.refresh),
onPressed: () {
_RIKey1.currentState.show();
},
)
],
bottom: new TabBar(
tabs: [
new Tab(icon: new Icon(Icons.view_list)),
new Tab(icon: new Icon(Icons.hotel)),
new Tab(icon: new Icon(Icons.assessment)),
],
),
title: new Text('Data'),
),
body: new TabBarView(
children: [
new RefreshIndicator(
key: _RIKey1,
onRefresh: _actualizoData1,
child: new ListView.builder(
padding: new EdgeInsets.only(top: 5.0),
itemCount: linea_reservas.length * 2,
itemBuilder: (BuildContext context, int position) {
if (position.isOdd) return new Divider();
final index = position ~/ 2;
return _buildRow(index);
}),
),
new RefreshIndicator(
key: _RIKey2,
onRefresh: _actualizoData2,
child: new ListView.builder(
padding: new EdgeInsets.only(top: 8.0),
itemCount: linea_inouthouse.length * 2,
itemBuilder: (BuildContext context, int position) {
if (position.isOdd) return new Divider();
final index = position ~/ 2;
return _buildRowInOutHouse(index);
}),
),
new RefreshIndicator(
key: _RIKey3,
onRefresh: _actualizoData3,
child: new ListView.builder(
padding: new EdgeInsets.only(top: 5.0),
itemCount: linea_ocupacion.length * 2,
itemBuilder: (BuildContext context, int position) {
if (position.isOdd) return new Divider();
final index = position ~/ 2;
return _buildRowOcupacion(index);
}),
),
],
),
),
),
);
}
the app works, but after changing tabs a few times, it crashes with this error:
I/flutter ( 5252): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 5252): The following assertion was thrown building NotificationListener<KeepAliveNotification>:
I/flutter ( 5252): Multiple widgets used the same GlobalKey.
I/flutter ( 5252): The key [LabeledGlobalKey<RefreshIndicatorState>#7bd42] was used by multiple widgets. The parents of
I/flutter ( 5252): those widgets were:
I/flutter ( 5252): - RepaintBoundary-[<[LabeledGlobalKey<RefreshIndicatorState>#7bd42]>](renderObject:
I/flutter ( 5252): RenderRepaintBoundary#60a4a DETACHED)
I/flutter ( 5252): - RepaintBoundary-[<[LabeledGlobalKey<RefreshIndicatorState>#7bd42]>](renderObject:
I/flutter ( 5252): RenderRepaintBoundary#c8cdb NEEDS-LAYOUT NEEDS-PAINT)
I/flutter ( 5252): A GlobalKey can only be specified on one widget at a time in the widget tree.
I searched online an found an StackOverflow solution Multiple widgets used the same GlobalKey to use custom keys:
import 'package:flutter/widgets.dart';
class RIKeys {
static final riKey1 = const Key('__RIKEY1__');
static final riKey2 = const Key('__RIKEY2__');
static final riKey3 = const Key('__RIKEY3__');
}
Now it works as intended but I'm not sure how I can declare it on state class and show the currentState.show() when the user taps on refresh button on the app bar as below:
GlobalKey<RefreshIndicatorState> _RIKey1 = new GlobalKey<RefreshIndicatorState>();
_RIKey1.currentState.show();
I'm not sure how to overcome this issue please advise. Thank you for any help.

Related

flutter how to make gridview show firebase data like buttons

I am trying to user Streambuilder to display gridview, but it return this error, I am calling the method classList() to container in scaffold body
database = FirebaseDatabase.instance
I want to show classData, show 0,1,2..etc I want to show ('className','classSection' in one button per child) in gridview as RaisedButtons
I get this error when the code below is executed
I/flutter ( 5433): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 5433): The following NoSuchMethodError was thrown building HomePage(dirty, state: _HomePage#055be):
I/flutter ( 5433): The method 'split' was called on null.
I/flutter ( 5433): Receiver: null
I/flutter ( 5433): Tried calling: split("/")
I/flutter ( 5433):
I/flutter ( 5433): When the exception was thrown, this was the stack:
I/flutter ( 5433): #0 Object.noSuchMethod (dart:core/runtime/libobject_patch.dart:50:5)
I/flutter ( 5433): #1 DatabaseReference.child (file:///G:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase_database-2.0.3/lib/src/database_reference.dart:24:58)
I/flutter ( 5433): #2 _HomePage.classList (package:barcode_scan_example/home_page.dart:169:44)
I/flutter ( 5433): #3 _HomePage.build (package:barcode_scan_example/home_page.dart:265:30)
I/flutter ( 5433): #4 StatefulElement.build (package:flutter/src/widgets/framework.dart:3825:27)
I/flutter ( 5433): #5 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3736:15)
I/flutter ( 5433): #6 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter ( 5433): #7 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
I/flutter ( 5433): #8 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11)
I/flutter ( 5433): #9 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
I/flutter ( 5433): #10 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
I/flutter ( 5433): #11 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
I/flutter ( 5433): #12 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
I/flutter ( 5433): #13 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
I/flutter ( 5433): #14 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2273:33)
I/flutter ( 5433): #15 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:700:20)
I/flutter ( 5433): #16 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:268:5)
I/flutter ( 5433): #17 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:988:15)
I/flutter ( 5433): #18 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:928:9)
I/flutter ( 5433): #19 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:840:5)
I/flutter ( 5433): #23 _invoke (dart:ui/hooks.dart:209:10)
I/flutter ( 5433): #24 _drawFrame (dart:ui/hooks.dart:168:3)
I/flutter ( 5433): (elided 3 frames from package dart:async)
classList() {
StreamBuilder(
stream:
database.reference().child('user').child(userUid).child('classData').orderByKey().onValue,
builder: (BuildContext context, AsyncSnapshot<Event> snapshot) {
if (snapshot.hasData) {
if (snapshot.data.snapshot.value != null) {
Map<dynamic, dynamic> map = snapshot.data.snapshot.value;
List<dynamic> list = map.values.toList();
print("list is : $list");
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemCount: list.length,
padding: EdgeInsets.all(2.0),
itemBuilder: (BuildContext context, int index) {
print("print job ${list[index]["className"]}");
return Container(
child: RaisedButton(
onPressed: null,
child: Text(
"${list[index]["className"]}\n ${list[index]["classSection"]}"),
),
padding: EdgeInsets.all(2.0),
);
},
);
} else {
return Container(
child: Center(
child: Text(
"There's no Class registered in the system",
style: TextStyle(fontSize: 20.0, color: Colors.grey),
textAlign: TextAlign.center,
)));
}
} else {
return CircularProgressIndicator();
}
});
}
the entire dart file
import 'package:flutter/material.dart';
import 'auth.dart';
import 'auth_provider.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/services.dart';
import 'make_class.dart';
import 'dart:async';
import 'package:barcode_scan/barcode_scan.dart';
import 'package:firebase_database/firebase_database.dart';
import 'qr_screen.dart';
class HomePage extends StatefulWidget {
#override
_HomePage createState() => _HomePage();
}
enum ScaffoldType { student, lecturer }
ScaffoldType _scaffoldType = ScaffoldType.lecturer;
class _HomePage extends State<HomePage> {
final FirebaseDatabase database = FirebaseDatabase.instance;
String barcode = "";
String userUid;
var userClass;
Future<void> _signOut(BuildContext context) async {
try {
final BaseAuth auth = AuthProvider.of(context).auth;
await auth.signOut();
} catch (e) {
print(e);
}
}
#override
void initState() {
super.initState();
userUi();
setState(() async* {
FirebaseDatabase database;
database = FirebaseDatabase.instance;
database.setPersistenceEnabled(true);
database.setPersistenceCacheSizeBytes(10000000);
});
}
Future reUser() async {
FirebaseUser user = await FirebaseAuth.instance.currentUser();
print(user.uid);
var userUid = user.uid;
var userWho = await database
.reference()
.child('user')
.child(userUid)
.once()
.then((DataSnapshot snapshot) {
Map<dynamic, dynamic> data = snapshot.value;
var isL = data.values.toList();
print(isL[1]);
print(data.values);
if (isL[1].toString().toLowerCase() == "true") {
_scaffoldType = ScaffoldType.lecturer;
print('lecturer');
} else if (isL[1].toString().toLowerCase() == "false") {
_scaffoldType = ScaffoldType.student;
print("student");
}
});
// print(userWho);
}
userUi() async {
FirebaseUser user = await FirebaseAuth.instance.currentUser();
print(user.uid);
return user.uid;
}
classList(userUid) {
print(userUid);
StreamBuilder(
stream:
database.reference().child('user').child(userUid).child('classData').orderByKey().onValue,
builder: (BuildContext context, AsyncSnapshot<Event> snapshot) {
if (snapshot.hasData) {
if (snapshot.data.snapshot.value != null) {
Map<dynamic, dynamic> map = snapshot.data.snapshot.value;
List<dynamic> list = map.values.toList();
print("list is : $list");
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemCount: list.length,
padding: EdgeInsets.all(2.0),
itemBuilder: (BuildContext context, int index) {
print("print job ${list[index]["className"]}");
return Container(
child: RaisedButton(
onPressed: (){},
child: Text(
"${list[index]["className"]}\n ${list[index]["classSection"]}"),
),
padding: EdgeInsets.all(2.0),
);
},
);
} else {
return Container(
child: Center(
child: Text(
"There's no Class registered in the system",
style: TextStyle(fontSize: 20.0, color: Colors.grey),
textAlign: TextAlign.center,
)));
}
} else {
return CircularProgressIndicator();
}
});
}
#override
Widget build(BuildContext context) {
// var userUid = userUi();
reUser();
return Scaffold(
appBar: AppBar(
title: Text('Welcome'),
actions: <Widget>[
FlatButton(
child: Icon(Icons.exit_to_app),
onPressed: () => _signOut(context),
)
],
),
bottomNavigationBar: BottomAppBar(
notchMargin: 8.0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Padding(
padding: const EdgeInsets.fromLTRB(35, 0, 35, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: buttonBelow(),
),
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: buttonBelow2(),
),
],
),
),
),
shape: CircularNotchedRectangle(),
),
resizeToAvoidBottomInset: true,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Container(
height: 80,
width: 80,
child: FittedBox(
child: FloatingActionButton(
onPressed: scan,
child: Icon(
Icons.camera,
size: 35,
),
elevation: 2.0,
),
),
),
body: Container(child: classList(userUi()),),
);
}
List<Widget> buttonBelow() {
if (_scaffoldType == ScaffoldType.lecturer) {
return <Widget>[
FlatButton(
child: Icon(
Icons.add_circle,
semanticLabel: "Add Class",
size: 45,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MakeClass()),
);
},
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(180)),
),
Text("Add Class")
];
} else {
return <Widget>[
Opacity(
opacity: 0,
child: FlatButton(
onPressed: () {},
child: Icon(
Icons.add_circle,
semanticLabel: "Add Class",
size: 45,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(180)),
),
),
Opacity(opacity: 0, child: Text("Add Class"))
];
}
}
List<Widget> buttonBelow2() {
if (_scaffoldType == ScaffoldType.lecturer) {
return <Widget>[
FlatButton(
child: Icon(
Icons.blur_on,
semanticLabel: "QRCode",
size: 45,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => QrScreen()),
);
},
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(180)),
),
Text("QRCode")
];
}
}
Future scan() async {
try {
String barcode = await BarcodeScanner.scan();
setState(() => this.barcode = barcode);
} on PlatformException catch (e) {
if (e.code == BarcodeScanner.CameraAccessDenied) {
setState(() {
this.barcode = 'The user did not grant the camera permission!';
});
} else {
setState(() => this.barcode = 'Unknown error: $e');
}
} on FormatException {
setState(() => this.barcode =
'null (User returned using the "back"-button before scanning anything. Result)');
} catch (e) {
setState(() => this.barcode = 'Unknown error: $e');
}
}
}
Main problem is when we pass blank or null string in ".child()" method of firebase, it will give us split("/") error because internally it will try to split from string and get try to get data
from it.
Now the problem in your code is you are calling "classList(userUid)" in the widget override method before the data come from firebase userid with use of StreamBuilder() but the userUid is blank and as i said above,
firebase will give us split("/") error if we pass blank or null in that ".child()" method.
So the conclusion is we have to wait for firebase userid until we get it from async result because to get firebase userid which is async task and we have to wait for that until result come with using await keyword.
So Here is the answer, how to do that:
You have to replace your body portion in widget with the use of future<> such as below:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Welcome'),
actions: <Widget>[
FlatButton(
child: Icon(Icons.exit_to_app),
onPressed: () => _signOut(context),
)
],
),
bottomNavigationBar: BottomAppBar(
notchMargin: 8.0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Padding(
padding: const EdgeInsets.fromLTRB(35, 0, 35, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: buttonBelow(),
),
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: buttonBelow2(),
),
],
),
),
),
shape: CircularNotchedRectangle(),
),
resizeToAvoidBottomInset: true,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Container(
height: 80,
width: 80,
child: FittedBox(
child: FloatingActionButton(
onPressed: scan,
child: Icon(
Icons.camera,
size: 35,
),
elevation: 2.0,
),
),
),
body: new FutureBuilder<FirebaseUser>(
future: FirebaseAuth.instance.currentUser(),
builder: (BuildContext context, AsyncSnapshot<FirebaseUser> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return new Container(child: classList(snapshot.data.uid));
}
else {
return new Text('Loading...');
}
},
),
);
}
Also the best practice is that you have to get firebase userid only in "initState()" method which will call only once during lifecycle. so declare "FirebaseUser user" globally in your class and then call your "userUi()"
in only "initState()" method.
The method 'split' was called on null.
This type of exceptions occurs whenever you are referencing a path that doesn't exist. So make sure the path of your firebase database is correct.

OpenFlutter/flutter_oktoast shows on main page only?

I am using this library to show custom toast in my app. I have multiple pages in my app. The problem is, toast appears on the main page even when I call showToastWidget(...) from any other pages.
Main Page
#override
Widget build(BuildContext context) {
return OKToast(
child: Scaffold(
backgroundColor: Theme.of(context).accentColor,
body: Center(
child: SizedBox(
height: 50,
width: 50,
child: Image(image: AssetImage('assets/ic_logo.png')),
),
),
),
);
}
Page 2
#override
Widget build(BuildContext context) {
return OKToast(
child: Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('Reset Password'),
),
body: Center(
child: Padding(
padding: EdgeInsets.all(20),
child: FlatButton(
onPressed: () {
showToastWidget(
Text('Hello. I am Toast!!!'),
duration: Duration(seconds: 2),
);
},
child: Text('Show'),
),
),
),
),
);
}
When I call showToastWidget(...) from this page, it appears on Main Page
EDIT 1
I get this exception when I pass context to showToastWidget()
I/flutter (24327): The following NoSuchMethodError was thrown while handling a gesture:
I/flutter (24327): The getter 'position' was called on null.
I/flutter (24327): Receiver: null
I/flutter (24327): Tried calling: position
I/flutter (24327):
I/flutter (24327): When the exception was thrown, this was the stack:
I/flutter (24327): #0 Object.noSuchMethod (dart:core/runtime/libobject_patch.dart:50:5)
I/flutter (24327): #1 showToastWidget (package:oktoast/src/toast.dart:210:40)
Looks like the OKToast library does not support multiple OKToast widgets in the same app. You will have to wrap your entire app in an OKToast widget, full sample:
import 'package:flutter/material.dart';
import 'package:oktoast/oktoast.dart';
void main() => runApp(App());
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return OKToast(
child: MaterialApp(
home: MainPage(),
),
);
}
}
class MainPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Theme.of(context).accentColor,
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
FlatButton(
child: Text("Show"),
onPressed: () {
showToast(
"Main Page toast",
duration: Duration(seconds: 2),
);
},
),
SizedBox(height: 12.0),
FlatButton(
child: Text("Go to next page"),
onPressed: () => _goToNextPage(context),
),
],
),
),
);
}
void _goToNextPage(BuildContext context) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage(),
),
);
}
}
class SecondPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("Second Page"),
),
body: Center(
child: Padding(
padding: EdgeInsets.all(20),
child: FlatButton(
onPressed: () {
showToast(
"Second Page toast",
duration: Duration(seconds: 2),
);
},
child: Text('Show'),
),
),
),
);
}
}
I am the author of OKToast, I am very glad that you use this library.
This tip of Toast is based on the design of toast in android on the mobile side.
The inspiration for OKToast itself comes from toast, so it is inevitable that it has received an impact, not adapting to the individual page-level Toast.
If you need a page-level OKToast component, you might need to do this:
import 'package:flutter/material.dart';
import 'package:oktoast/oktoast.dart';
import 'package:simple_widget/simple_widget.dart';
class CategoryPage extends StatefulWidget {
#override
_CategoryPageState createState() => _CategoryPageState();
}
class _CategoryPageState extends State<CategoryPage> {
#override
Widget build(BuildContext context) {
return OKToast(
child: SimpleScaffold(
title: "CategoryPage",
actions: <Widget>[
Builder(
builder: (ctx) => IconButton(
icon: Icon(Icons.trip_origin),
onPressed: () {
showToast("page toast", context: ctx); // use context to show toast in the page-level OKToast.
},
),
),
],
child: Container(),
),
);
}
}

Flutter Stepper horizontal type not working

I have a problem with changing the Stepper type from vertical to horizontal.
This is my code:
body: new ListView.builder(
itemCount: data == null ? 0 : 5,
itemBuilder: (BuildContext context, int index) {
return new Card(
//child: new Text(data[index]["title"]),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Stepper(
steps: my_steps,
type: StepperType.horizontal,
controlsBuilder: (BuildContext context,
{VoidCallback onStepContinue, VoidCallback onStepCancel}) {
return Row(
children: <Widget>[
Container(
child: null,
),
Container(
child: null,
),
],
);
},
//type: StepperType.horizontal,
),
));
},
),
After I uncomment the type I get this error:
I/flutter (10148): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════ I/flutter
(10148): The following assertion was thrown during performLayout():
I/flutter (10148): RenderFlex children have non-zero flex but incoming
height constraints are unbounded. I/flutter (10148): When a column is
in a parent that does not provide a finite height constraint, for
example if it is I/flutter (10148): in a vertical scrollable, it will
try to shrink-wrap its children along the vertical axis. Setting a
I/flutter (10148): flex on a child (e.g. using Expanded) indicates
that the child is to expand to fill the remaining I/flutter (10148):
space in the vertical direction.
Your ListView has unbounded heigh so it doesn't know how much space to use for each child, which is a Stepper.
Give it some constraints, such minimum height size for each and you should be fine.
(...)
ConstrainedBox(
constraints: BoxConstraints.tightFor(height: 200.0),
child: Stepper(
steps: my_steps(),
type: StepperType.horizontal,
(...)
You can use the SizedBox() or Container() widget and set it height
SizedBox(
height: 200,
child: Card(
//child: new Text(data[index]["title"]),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Stepper(
steps: my_steps(),
type: StepperType.horizontal,
controlsBuilder: (BuildContext context,
{VoidCallback onStepContinue, VoidCallback onStepCancel}) {
return Row(
children: <Widget>[
Container(
child: null,
),
Container(
child: null,
),
],
);
},
//type: StepperType.horizontal,
),
)),
)

Flutter - Calling persistent bottom sheet from another class

I have a persistent bottom sheet in Flutter which currently exists inside an icons onPressed(){} property.
I would like to move this persistent bottom sheet to a new class on its own but I can't seem to get it working. I am still new to flutter and can't work out how to build the structure for the persistent bottom bar.
I have currently tried the below but when I run my code, I get an exception that is thrown.
main.dart
#override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text('Test App'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.open_in_new),
onPressed: (){
ShowBottomSheet(context);
},
)
],
),
bottom_modal_sheet.dart
final GlobalKey<ScaffoldState> _scaffoldKey = new
GlobalKey<ScaffoldState>();
void ShowBottomSheet(BuildContext context) {
_scaffoldKey.currentState.showBottomSheet<Null>((BuildContext context)
{
return new Container(
width: double.infinity,
child: new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 24.0, top: 16.0),
child: Text('Site Location',
style: TextStyle(fontSize: 24.0, color: Color(0xFF1181A1), fontWeight: FontWeight.bold,),
),
),
Padding(
padding: EdgeInsets.only(left: 24.0, top: 16.0),
child: Text('11 Carr Road, Three Kings, Auckland 1042',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 16.0, color: Color(0xFF8596AC)),
),
),
Padding(
padding: EdgeInsets.only(left: 24.0, top: 24.0, right: 24.0, bottom: 16.0),
child: RasiedGradientButton(
child: Text('Set Location', style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold, color: Colors.white)),
gradient: LinearGradient(
colors: <Color>[Color(0xFFFCCF58), Color(0xFFFEAA00)]
),
onPressed: (){
print('button clicked');
},
)
),
],
));
});
}
I am getting the error:
I/flutter (19024): ══╡ EXCEPTION CAUGHT BY GESTURE
╞═══════════════════════════════════════════════════════════════════
I/flutter (19024): The following NoSuchMethodError was thrown while
handling a gesture:
I/flutter (19024): The method 'showBottomSheet' was called on null.
I/flutter (19024): Receiver: null
I/flutter (19024): Tried calling: showBottomSheet<Null>(Closure:
(BuildContext) => Container)
I/flutter (19024):
You just need call showBottomSheet in your screen widget that you want show the bottom sheet and return the widget of your custom bottom sheet. The snippet show how to do this. Read the source comments.
// our Screen widget class
class MyScreen extends StatefulWidget {
#override
_MyScreenScreenState createState() => _MyScreenScreenState();
}
class _MyScreenState extends State<MyScreenScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Test App'),
actions: <Widget>[
IconButton( icon: Icon(Icons.open_in_new),
onPressed: (){
_showMyBottomSheet();
},
)
],
),
);
}
void _showMyBottomSheet(){
// the context of the bottomSheet will be this widget
//the context here is where you want to showthe bottom sheet
showBottomSheet(context: context,
builder: (BuildContext context){
return MyBottomSheetLayout(); // returns your BottomSheet widget
}
);
}
}
//your bottom sheet widget class
//you can put your things here, like buttons, callbacks and layout
class MyBottomSheetLayout extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(); // return your bottomSheetLayout
}
}

Flutter - How to make PageView & ListView?

I'm trying to make a Carousel using PageView, PageController and ListView from this Horizontally scrollable cards with Snap effect in flutter. But it throwed this exception...
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (17678): The following assertion was thrown during performResize():
I/flutter (17678): Horizontal viewport was given unbounded height.
I/flutter (17678): Viewports expand in the cross axis to fill their container and constrain their children to match
I/flutter (17678): their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of
I/flutter (17678): vertical space in which to expand.
Can someone help me to fix it?
I want to add this Carousel inside of Stack-filled with background image, transform class, and fade transition.
#override
void initState() {
super.initState();
controller = PageController(
initialPage: 0,
keepPage: true,
);
#override
Widget build(BuildContext context) {
return AnimatedBuilder(
builder: (BuildContext context, Widget child) {
return Scaffold(
//BODY
body: ListView(children: <Widget>[
new Stack(
children: <Widget>[
new AspectRatio(...),
new Transform(...),
//THIS IS
new ListView.builder(
itemCount: 3,
scrollDirection: Axis.horizontal,
padding: EdgeInsets.symmetric(vertical: 16.0),
itemBuilder: (BuildContext context, int index) {
if (index % 3 == 0) {
return _buildCarousel(context, index ~/ 3);
} else {
return Divider();
}
},
),
}
}
}
Widget _buildCarousel(BuildContext context, int carouselIndex) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('Carousel $carouselIndex'),
SizedBox(
// you may want to use an aspect ratio here for tablet support
height: 200.0,
child: PageView.builder(
// store this controller in a State to save the carousel scroll position
controller: PageController(viewportFraction: 0.8),
itemBuilder: (BuildContext context, int itemIndex) {
return _buildCarouselItem(context, carouselIndex, itemIndex);
},
),
)
],
);
Widget _buildCarouselItem(
BuildContext context, int carouselIndex, int itemIndex) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 4.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.all(Radius.circular(4.0)),
),
),
);
This is the full code https://pastebin.com/xXRkaWuR
As you might have guessed from the error, basically it means since you haven't specified a finite height,ListView is getting infinite height.
Try using shrinkWrap: true inside your ListView.builder and ListView.
Or alternatively you can also try wrapping your ListViews in a Container or SizedBox of finite height.
Example-
Container(
height: 200.0,
child: ListView(
/*Remaining Code*/
),
)
You can try doing the same with ListView.builder

Resources