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

Time:03-01

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_stack.dart

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

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

class _AppBaseStackState extends State<AppBaseStack> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(50),
        child: AppBar(),
      ),
    );
  }
}

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.

CodePudding user response:

In initState (before the view is loaded) call a method that does this:

final String response = await rootBundle.loadString('[route]/file.json');
final data = json.decode(response);
setState(() {
  heightAppBar = double.parse(data["app_bar"]["app_bar_height"]);
});

The method is async, so you need to set a default value to heightAppBar and then update.

CodePudding user response:

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;
}
  • Related