Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Implementing PreferredSizeWidget For Use As Appbar

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)

like image 785
jared-nelsen Avatar asked Apr 22 '18 03:04

jared-nelsen


People also ask

What is preferredsizewidget in Android appbar?

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.

What is the preferred size of the appbar in Android?

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.

What is the use of appbar?

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.

What is appbar in flutter?

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.


2 Answers

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

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

like image 78
Giraldi Avatar answered Sep 29 '22 09:09

Giraldi


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

}
like image 42
Paresh Mangukiya Avatar answered Sep 29 '22 10:09

Paresh Mangukiya