My app uses a hierachy of UI designs and extended designs for the correct layout (naturally).
One of my hierachies is a simple 3 layer approach:
HomePage (content) ->
UiBaseMain (structure for content) ->
UiBase (scaffolding)
Details: (and an MVCE) - I have tried narrowing down to the simplest form to get repeatedly throw this error.
Tested on both physical devices and AVD, both give a Stack Overflow error.
UiBase (ui_component_base.dart) (which all layouts are based on)
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class UiBase extends StatelessWidget {
final Widget widget;
const UiBase({Key key, this.widget})
: super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: const EdgeInsets.only(left: 8.0, right: 8.0),
width: double.infinity,
child: widget),
);
}
}
UiBaseMain (ui_main_navbar_appbar.dart) (where all Main UI content is shown with i.e. Dashboard, settings, etc which ideally alsop contains a small logo ontop, a BottomNavigationBar, etc)
import 'package:mytestapp/ui/design/ui_component_base.dart';
import 'package:flutter/widgets.dart';
class UiBaseMain extends StatefulWidget {
final Widget widget;
const UiBaseMain({Key key, this.widget}) : super(key: key);
#override
_UiBaseMain createState() => _UiBaseMain();
}
class _UiBaseMain extends State<UiBaseMain> {
#override
Widget build(BuildContext context) {
return UiBase(
widget: widget,
);
}
}
Finally, HomePage (ui_homepage.dart) (which is a content page, should show user content, etc)
import 'package:mytestapp/ui/design/ui_main_navbar_appbar.dart';
import 'package:flutter/widgets.dart';
class HomePage extends StatefulWidget {
const HomePage({Key key}) : super(key: key);
#override
_HomePage createState() => _HomePage();
}
class _HomePage extends State<HomePage> {
#override
Widget build(BuildContext context) {
return UiBaseMain(
widget: Text("test"),
);
}
}
Problem
Using the above structure, I consistently get the following Stack Overflow error
======== Exception caught by widgets library =======================================================
The following StackOverflowError was thrown building Material(type: canvas, color: Color(0xfffafafa), dependencies: [_InheritedTheme, _LocalizationsScope-[GlobalKey#1c4c4], _EffectiveTickerMode], state: _MaterialState#b2ccd):
Stack Overflow
The relevant error-causing widget was:
Scaffold file:///C:/Users/CybeX/mytestapp/mytestapp-mobile-flutter/lib/ui/design/ui_component_base.dart:14:12
When the exception was thrown, this was the stack:
#0 _WordWrapParseMode.values (package:flutter/src/foundation/diagnostics.dart:776:6)
#1 _SyncIterator.moveNext (dart:core-patch/core_patch.dart:165:25)
#2 Iterable.length (dart:core/iterable.dart:429:15)
#3 _PrefixedStringBuilder._finalizeLine (package:flutter/src/foundation/diagnostics.dart:856:30)
#4 _PrefixedStringBuilder.write (package:flutter/src/foundation/diagnostics.dart:973:9)
...
====================================================================================================
======== Exception caught by widgets library =======================================================
The method 'call' was called on null.
Receiver: null
Tried calling: call()
The relevant error-causing widget was:
Scaffold file:///C:/Users/CybeX/mytestapp/mytestapp-mobile-flutter/lib/ui/design/ui_component_base.dart:14:12
====================================================================================================
======== Exception caught by widgets library =======================================================
The method 'call' was called on null.
Receiver: null
Tried calling: call()
The relevant error-causing widget was:
Scaffold file:///C:/Users/CybeX/mytestapp/mytestapp-mobile-flutter/lib/ui/design/ui_component_base.dart:14:12
====================================================================================================
Question
Is this an issue my side or is this an issue others can confirm and infact a bug in the Flutter framework?
You have to pass here widget.widget because it is a stateful widget, no? : return UiBase(
widget: widget,
);
Sorry not convenient to write from phone.
Related
I want to obtain RenderObject of SelectableText because I want obtain RenderBox of the text, which, to my understanding, is obtainable via RenderObject.
So, I try to use GlobalKey to access the RenderObject by using this GlobalKey().currentContext?.findRenderObject()
But what I got is not what I want...
This is the demo program:
class Demo extends StatefulWidget {
const Demo({Key? key}) : super(key: key);
#override
State<Demo> createState() => _DemoState();
}
class _DemoState extends State<Demo> {
final _selectableTextKey = GlobalKey();
#override
Widget build(BuildContext context) {
return SelectableText(
'This is a test',
key: _selectableTextKey,
onTap: () {
print(
'render object == ${_selectableTextKey.currentContext?.findRenderObject()}');
},
);
}
}
This is the output in the console:
flutter: render object == RenderSemanticsAnnotations#52070 relayoutBoundary=up4
As illustrated in the screenshot of the DetailTree
I want the RenderObject of green arrow's, but I got red arrow's instead.
Using GlobalKey to obtain RenderObject then to access the RenderBox is all I know so far, so I don't have other idea to try...
I am quite puzzled about the values being passed in the class constructor not being available in the Widget.
I am passing the value of the cards in the widget constructor, but when debugging it and after they are build the Text widgets do not have any text.
Initializing the Widget with the values.
Debugger shows the cardValue fields with no value.
Empty Widget:
This should work:
class PockerCard extends StatefulWidget {
final String cardValue;
const PockerCard({Key key, this.cardValue}) : super(key: key);
#override
_PockerCardState createState() => _PockerCardState();
}
class _PockerCardState extends State<PockerCard> {
#override
Widget build(BuildContext context) {
return Container(
child: Text(widget.cardValue),
);
}
}
I'm new to flutter and I wish to organize my folders in order to write cleaner code.
I'm trying to divide my flutter page on three parts:
login_view.dart (this view will be rendered as the login view and will call functions defined into login_builder.dart to build each of its widgets)
login_builder.dart (contains function definitions called by login_view.dart to build widgets)
login_state.dart (for state management)
But when I call Provider.of(context) inside a functiton that is defined into login_builder.dart (out of the login_view.dart widget tree) it always throws ProviderNotFoundException
// login_view.dart
import 'package:discover/ui/views/login/login_builder.dart';
import 'package:discover/ui/views/login/login_state.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class Login extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider<LoginState>(
create: (context) => LoginState(),
child: buildLoginForm(context),
);
}
}
// login_builder.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:discover/ui/views/login/login_state.dart';
Widget buildLoginForm(BuildContext context) {
var loginState = Provider.of<LoginState>(context);
return Form(
child: Column(
children: <Widget>[
TextFormField(
onChanged: (value) => loginState.userName = value,
)
],
),
);
}
// login_state.dart
import 'package:flutter/material.dart';
class LoginState extends ChangeNotifier {
String _userName = "";
String get userName => _userName;
set userName(String userName) {
_userName = userName;
}
}
// Debug Console
════════ Exception caught by widgets library ═══════════════════════════════════
The following ProviderNotFoundException was thrown building Login(dirty):
Error: Could not find the correct Provider<LoginState> above this Login Widget
To fix, please:
* Ensure the Provider<LoginState> is an ancestor to this Login Widget
* Provide types to Provider<LoginState>
* Provide types to Consumer<LoginState>
* Provide types to Provider.of<LoginState>()
* Ensure the correct `context` is being used.
If none of these solutions work, please file a bug at:
https://github.com/rrousselGit/provider/issues
The relevant error-causing widget was
Login
When the exception was thrown, this was the stack
Provider.of
buildLoginForm
Login.build
StatelessElement.build
ComponentElement.performRebuild
The context you passed to login_builder is the same context that was passed to login_view, so it exists in a place of the widget tree above where you inserted your ChangeNotifierProvider which is why you can't find it with Provider.of. In order to get this to work the way you want it to, you need to utilize a Builder widget to gain a new BuildContext that exists below the provider:
class Login extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider<LoginState>(
create: (context) => LoginState(),
child: Builder(builder: buildLoginForm),
);
}
}
Now the context passed to buildLoginForm will be the context for the Builder (which exists below the provider) instead of for your Login widget (which exists above the provider).
I was learning and trying to create one app using one stateful widget to display a list. My code looks like the following:
main.dart
import 'package:flutter/material.dart';
import './widgets/user_transactions.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
child: UserTransactions(),
),
),
);
}
}
and the stateul widget code is:
user_transactions.dart
import 'package:flutter/material.dart';
import '../models/transaction.dart';
class UserTransactions extends StatefulWidget {
#override
_UserTransactionsState createState() => _UserTransactionsState();
}
class _UserTransactionsState extends State<UserTransactions> {
final List<Transaction> _userTransactionLists = [
Transaction(name: 'boss 01'),
Transaction(name: 'boss 02'),
Transaction(name: 'boss 03'),
Transaction(name: 'boss 04'),
];
#override
Widget build(BuildContext context) {
print('==========================================');
print(_userTransactionLists.length);
return Column(
children: _userTransactionLists.map((tx) {
Text(tx.name);
print(tx.name);
}).toList(),
);
}
}
And the transaction class looks like this:
Transaction.dart
import 'package:flutter/foundation.dart';
class Transaction {
final String name;
Transaction({#required this.name});
}
But getting the error:
══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY
╞═══════════════════════════════════════════════════════════
The following assertion was thrown building UserTransactions(dirty, state:
_UserTransactionsState#c1fe3):
Column's children must not contain any null values, but a null value was
found at index 0
The relevant error-causing widget was:
UserTransactions org-dartlang-app:///packages/test_01/main.dart:14:18
I tried long time but still could not figure out. And when I was tying to debug, I am geeing the correct output using print line. It looks like the following:
#override
Widget build(BuildContext context) {
print('==========================================');
print(_userTransactionLists.length);
return Column(
children: _userTransactionLists.map((tx) {
print(tx.name);
return Text(tx.name);
}).toList(),
);
}
You are getting this error because you didn't return any value so, your tolist() method was retuning a list of null objects
I want to have a multi-section form which has several subforms which when completed and validated will callback to the parent widget in order to go to the next subform.
my issue is I keep getting an error saying the function is null and I'm not sure why.
iv tried having a function within the StatefulWidget of the child but I always get an error saying the function is null when calling the parents passed through 'complete' function.
I/flutter (23821): ══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════
I/flutter (23821): The following NoSuchMethodError was thrown while handling a gesture:
I/flutter (23821): The method 'call' was called on null.
I/flutter (23821): Receiver: null
I/flutter (23821): Tried calling: call()
I thought I was doing it correctly but am a bit lost on what to try next, here is my code :
parent widget
class CreateForm extends StatefulWidget {
CreateForm({
Key key
}): super(key: key);
CreateFormState createState() => CreateFormState();
}
class CreateFormState extends State < CreateForm > {
bool userDetailsCompleted = false;
final formKey = GlobalKey < FormState > ();
#override
Widget build(BuildContext context) {
return !userDetailsCompleted ? UserDetailsForm(
completed: () {
print("testing");
// setState(() {
// userDetailsCompleted = true;
// });
},
) : nextSection(
);
}
}
child widget
class UserDetailsForm extends StatefulWidget {
final Function completed;
UserDetailsForm({
#required this.completed,
Key key
}): super(key: key);
UserDetailsFormState createState() => UserDetailsFormState();
}
class UserDetailsFormState extends State < UserDetailsForm > {
#override
Widget build(BuildContext context) {
return Form(
child: CustomButton(
size: 15,
text: 'Submit',
onPressed: () {
print('UserDetails account form submit');
widget.completed();
},
)
);
}
}
I tried your code locally, and it works. I think you just need to restart the Flutter, as maybe you just replaced Stateles to Stateful widget a moment before
Fully-working repo
You can build it locally also in this Github repo
demo