Menu
I am trying to build a component that can be used to identify two columns in a listview. I wish to be able to implement this title bar as the appbar in a Scaffold such that I can implement the ListView in the body part of the Scaffold. I want to do this because I want to use this pattern multiple times throughout my app and do not wish to implement a crude title bar each time I do so.
Because all that is required for an AppBar component is the implementation of PreferredSizeWidget, I thought this should be pretty straightforward:
import 'package:flutter/material.dart';
class ListTitleBar extends StatefulWidget implements PreferredSizeWidget {
final String _left;
final String _right;
ListTitleBar(this._left, this._right);
@override
State<StatefulWidget> createState() => new ListTitleBarState(_left, _right);
@override
Size get preferredSize {
new Size.fromHeight(20.0);
}
}
class ListTitleBarState extends State<ListTitleBar> {
String _leftTitle;
String _rightTitle;
ListTitleBarState(this._leftTitle, this._rightTitle);
@override
Widget build(BuildContext context) {
return new Container(
decoration: new BoxDecoration(
color: Colors.redAccent,
border: new Border.all(color: Colors.black),
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
///Left Column Title
new Column(
children: <Widget>[
new Container(
color: Colors.redAccent,
padding: const EdgeInsets.all(10.0),
child: new Text(_leftTitle,
style: new TextStyle(
color: Colors.white,
fontSize: 18.0
),
),
)
],
),
///Right Column Title
new Column(
children: <Widget>[
new Container(
color: Colors.redAccent,
padding: const EdgeInsets.all(10.0),
child: new Text(_rightTitle,
style: new TextStyle(
color: Colors.white,
fontSize: 18.0
),
),
)
],
),
],
),
);
}
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
}
My question is about what else is needed to successfully implement PreferredSizeWidget or to accomplish my goal. Right now I am getting the following stack trace which seems to indicate that I am neglecting a few aspects of the implementation:
══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ I/flutter ( 9130): The following NoSuchMethodError was thrown building Scaffold(dirty, state: I/flutter ( 9130): ScaffoldState#7c75d(tickers: tracking 1 ticker)): I/flutter ( 9130): The getter 'height' was called on null. I/flutter ( 9130): Receiver: null I/flutter ( 9130): Tried calling: height I/flutter ( 9130): I/flutter ( 9130): When the exception was thrown, this was the stack: I/flutter ( 9130): #0 Object.noSuchMethod (dart:core/runtime/libobject_patch.dart:46:5) I/flutter ( 9130): #1 ScaffoldState.build (package:flutter/src/material/scaffold.dart:1447:57) I/flutter ( 9130): #2 StatefulElement.build (package:flutter/src/widgets/framework.dart:3713:27) I/flutter ( 9130): #3 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3625:15) I/flutter ( 9130): #4 Element.rebuild (package:flutter/src/widgets/framework.dart:3478:5) I/flutter ( 9130): #5 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3605:5) I/flutter ( 9130): #6 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3752:11) I/flutter ( 9130): #7 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3600:5) I/flutter ( 9130): #8 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2890:14) I/flutter ( 9130): #9 Element.updateChild (package:flutter/src/widgets/framework.dart:2693:12) I/flutter ( 9130): #10 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3636:16)
785
In the case of the AppBar class implementing the class, PreferredSizeWidget, it is the instance field, preferredSize, that now has to be assigned a value. You see, it’s seen as the height in which the AppBar widget would prefer to be if it were unconstrained.
appBar: PreferredSize ( preferredSize: Size.fromHeight (100.0), child: AppBar ( title: Text ("Title"), ), ), appBar: PreferredSize ( preferredSize: Size.fromHeight (30.0), child: AppBar ( title: Text ("Title"), ), ), Use a flexibleSpace and Image.
Appbar will display the toolbar that we see in every application. It also displays several widgets like the title of the screen, the back button (‘ <- ‘) / close button (‘ x ‘) & actions like search, etc. The actions are indicated using icon buttons.
AppBar is usually the topmost component of the app (or sometimes the bottom-most), it contains the toolbar and some other common action buttons. As all the components in a flutter application is a widget or a combination of widgets. So AppBar is also a built-in class or widget in flutter which gives the functionality of the AppBar out of the box.
I think you forgot the return statement in your preferredSize. Should be like so:
Size get preferredSize {
return new Size.fromHeight(20.0);
}
78
As he said @Giraldi you forgot the return statement so you can do it that way and you can do it this way too.
class ListTitleBar extends StatefulWidget implements PreferredSizeWidget {
ListTitleBar({Key key}) : preferredSize = Size.fromHeight(50.0), super(key: key);
@override
final Size preferredSize;
@override
State<StatefulWidget> createState() => new ListTitleBarState();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
