SingleTickerProviderStateMixin and custom mixin

2,714

It turns out I was thinking too big, combining mixins can be done with a simple comma.

... with SingleTickProviderMixin, BasePageMixin

Share:
2,714
Rohan
Author by

Rohan

CODING. It may be the closest thing we have to a superpower.

Updated on December 21, 2022

Comments

  • Rohan
    Rohan over 1 year

    I'm a bit of a newb with Flutter and Dart, and Google couldn't help me with this question.

    Say I have this:

    class _MapPageState extends BaseState<MapPage> with SingleTickerProviderStateMixin

    I want to add another mixin (BasePage) on top of this that contains a reusable appbar, drawer, etc. The layout is described in this article.

    I know this is not possible, and my IDE throws an error that tells me to integrate them, but I do not know how. Is there a solution? I need SingleTickerProviderStateMixin because it is required by an AnimationController I am using.

    Here is the custom mixin code, if needed:

    abstract class Base extends StatefulWidget {
      Base({Key key}) : super(key: key);
    }
    
    abstract class BaseState<Page extends Base> extends State<Page> {
      String screenName();
    }
    
    mixin BasePage<Page extends Base> on BaseState<Page> {
    
      MapFunctions functions = MapFunctions();
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text('Guidey'),
              backgroundColor: Colors.deepOrangeAccent,
              centerTitle: true,
            ),
            drawer: Theme(
              data: Theme.of(context).copyWith(
                canvasColor: Colors.black.withOpacity(0.5)
              ),
              child: Drawer(
                child: ListView(
                  padding: EdgeInsets.fromLTRB(40.0, 10.0, 40.0, 10.0),
                  children: <Widget>[
                    DrawerHeader(
                      child: Padding(
                        padding: EdgeInsets.fromLTRB(0, 35, 0, 0),
                        child: Text('Navigation', textAlign: TextAlign.center, style: TextStyle(fontSize: 20, color: Colors.white))
                      )
                    ),
                    ListTile(
                      title: Text('Profile', style: TextStyle(color: Colors.white)),
                      trailing: Icon(Icons.account_circle, color: Colors.white70),
                      onTap: (){
                        Navigator.of(context).pop();
                      },
                    ),
                    ListTile(
                      title: Text('Map', style: TextStyle(color: Colors.white)),
                      trailing: Icon(Icons.drive_eta, color: Colors.white70),
                      onTap: (){
                        Navigator.of(context).pop();
                      },
                    ),
                    ListTile(
                      title: Text('My Location', style: TextStyle(color: Colors.white)),
                      trailing: Icon(Icons.store, color: Colors.white70),
                      onTap: (){
                      },
                    )
                  ],
                )
              ),
            ),
        );
      }
    
      Widget body();
    }