I'm trying to create a basePage that works as the base page for my Flutter App, however i'm getting an error, and i have no idea why

base_page.dart

 //@dart=2.9
import 'package:flutter/material.dart';
import 'package:myapp/services/shared_service.dart';
import 'categories/categories_list.dart';

class BasePage extends StatefulWidget {
  @override
  State<BasePage> createState() => _BasePageState();
}

class _BasePageState<T extends BasePage> extends State<T> {
  String pageTitle = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildAppBar(),
      body: pageUI(),
    );
  }

  Widget _buildAppBar() {
    return AppBar(
        title: Text(pageTitle),
        elevation: 0,
        automaticallyImplyLeading: true,
        backgroundColor: Theme.of(context).primaryColor,
        actions: [
          IconButton(
            icon: new Icon(
              Icons.logout,
              color: Colors.black,
            ),
            onPressed: () {
              SharedService.logout();
            },
          ),
          SizedBox(
            width: 10,
          )
        ]);
  }

  Widget pageUI() {
    return null;
  }

  @override
  void dispose() {
    super.dispose();
  }
}

categories_list.dart

 //@dart=2.9
import 'package:flutter/material.dart';
import '../base_page.dart';

class CategoriesList extends BasePage {
  @override
  _State createState() => _CategoriesListState();
}

class _State extends BasePageState<CategoriesList> {
  @override
  Widget PageUI() {
    return Container(
      child: Text("Categories List"),
    );
  }
}

I'm getting the following error

I'm following a flutter course and the same code works for the instructor.

What's wrong with my code with explanation if possible

CodePudding user response：

First change your main Class to this:

class BasePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => BasePageState<BasePage>();
}

class BasePageState<T extends StatefulWidget> extends State<T> {

...

}

then extends your list widget like this:

class CategoriesList extends BasePage {
  @override
  State<StatefulWidget> createState() => _CategoriesListState();
}

class _CategoriesListState extends BasePageState<CategoriesList> {
  @override
  Widget PageUI() {
    return Container(
      child: Text("Categories List"),
    );
  }
}

CodePudding user response：

You just need to change the createState method to look like this:

import 'package:flutter/material.dart';
import '../base_page.dart';

class CategoriesList extends BasePage {
  @override
  _State createState() => _State();
}

class _State extends BasePageState<CategoriesList> {
  @override
  Widget PageUI() {
    return Container(
      child: Text("Categories List"),
    );
  }
}

The state class you created is already private since you're using an underscore so this approach is less verbose.