Implementing PreferredSizeWidget For Use As Appbar

15
votes

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)

2
flutter
Basically u wat to create a component to have a Title and a list is that what you mean to say? – silentsudo
No I would like to create a component that I can assign to the appBar field in the Scaffold Widget. I would implement the ListView in the body field of the Scaffold. – jared-nelsen

2 Answers

16
votes

I think you forgot the return statement in your preferredSize. Should be like so:

Size get preferredSize { return new Size.fromHeight(20.0); }

4
votes

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();

}