How do I properly create responsive appbars for flutter web apps?

I want to have two different sized appbars for my flutter web app. I want to create them each with their own class. So I was thinking something like this:

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

class LargeAppBar
{
  AppBar largeAppBar()
  {
    return AppBar(
      backgroundColor: const Color.fromARGB(255, 0, 56, 244),
      title: Row(
        children: [
          Text(
            'myapptitle',
            style: GoogleFonts.montserrat(
              color: const Color.fromARGB(255, 174, 255, 244),
              fontSize: 24,
              fontWeight: FontWeight.w500
            ),
          ),
        ],
      ),
      elevation: 0,
    );
  } 
}

So this one will be for larger screen sizes and I'll do something similar for smaller screen sizes. Should I make the classes Stateful Widgests instead? Please suggest a way to do this properly for the sake of state management and scaling of the application.