I want to change App bar height with the key value of JSON

Question

I have a use case where I need to change the app bar height with a key value of JSON.

I have this Scaffold which shows a plain appbar and the height of the appbar which is 50px:

# app_base.dart

class AppBaseStack extends StatefulWidget {
  const AppBaseStack({Key? key}) : super(key: key);

  @override
  _AppBaseStackState createState() => _AppBaseStackState();
}

class _AppBaseStackState extends State<AppBaseStack> {
  
double? heightAppBar;
 
 @override
  initState() {
    loadAppbarHeight();
    debugPrint(heightAppBar.toString());
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(heightAppBar),
        child: AppBar(),
      ),
    );
  }
loadAppbarHeight() async {
    final String response = await rootBundle.loadString('[route]/file.json');
    final data = json.decode(response);
    setState(() {
      heightAppBar = double.parse(data["app_bar"]["app_bar_height"]);
    });
  }
}

This is the JSON file which I want to grab the key value of app_bar_height to change the height of the appbar:

#app_style.json

{
  "app_bar":
  {
    "app_bar_height": "50"
  }
  
}

I want to grab the JSON and then grab key app_bar_height and read the value of this key. Then I want to change the height of the app bar with this key value. And if I want to change the app bar height I want to do so by changing the key value of app_bar_height from 50 to for example 60 in the JSON file itself.

I don't know how I can do this I tried many things but I want to know if there is an acceptable way in flutter/dart.

EDIT

So i made some changes in the app_base.dart file. I added the method which loads the json and grabs the json and grabs the key app_bar_height. I also added a initState which initializes the method but i get an error: Null check operator used on a null value

for some reason heightAppBar is null how can i fix this?

Answer 1

this is what I use in my project. you can pass height parameter while adding your project.

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  final List<Widget>? actions;
  final String? text;
  final TabBar? bottom;
  final Widget? title;
  final bool? disableLeading;
  final Function? leadingAction;


  CustomAppBar({
    Key? key,
    this.actions,
    this.disableLeading,
     this.text,
    this.title,
    this.bottom,
    this.leadingAction,
  })  : preferredSize = Size.fromHeight(bottom != null ? 120 : 60),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      backgroundColor: primaryColor,
      elevation: 0,
      iconTheme: IconThemeData(color: Colors.white),
      centerTitle: Platform.isIOS ? true : false,
      title: this.title??AutoSizeText(text??"",
          minFontSize: 11,
          maxFontSize: 18,
          maxLines: 1,
          overflow: TextOverflow.fade,
          style: TextStyle(color: Colors.white, fontWeight: FontWeight.w700)),
      leading: disableLeading!=null?Container():SizedBox(
          child: IconButton(
              icon: Icon(
                FontAwesomeIcons.chevronLeft,
                color: Colors.white,
              ),
              onPressed: () {
                
                Get.back();
                if(leadingAction!= null)
                leadingAction!();
              })),
      actions: this.actions,
      bottom: this.bottom,
    );
  }

  @override
  Size preferredSize;
}