I want to put a text and icon in the status bar that comes from the api . and it can changes base on the location for example . is there any solution for that?

it sounds crazy but is it really workable? I'm new in Flutter . thanks

CodePudding user response：

we have statusBar and appBar, i think you mean appBar because statusBar is designed by os and you can not add some widgets to it. if you want to customize an appBar you can create one to make your app what you want. here is custom app bar that i'm using in my code:

class CustomAppBar extends StatelessWidget {
  final String? title;
  final bool? hasBackButton;
  final Color? color;
  final Widget? actionWidget;
  final double? height;

  const CustomAppBar(
      {Key? key,
        this.title,
        this.hasBackButton = true,
        this.color = primaryDark, this.actionWidget, this.height})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    return Consumer<SettingProvider>(
        builder: (context, settingProvider, child) {
          return Stack(
            alignment: AlignmentDirectional.centerStart,
            children: [
              SizedBox(
                width: width,
                height: height ?? width * 0.1333,
                child: Center(
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: width * 0.1333),
                    child: TextView(
                      text: title ?? '',
                      color: color ?? primaryDark,
                      size: 16,
                      textAlign: TextAlign.center,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                ),
              ),
              if (hasBackButton!)
                InkWell(
                  onTap: () => locator<NavigationService>().goBack(),
                  splashColor: transparent,
                  highlightColor: transparent,
                  child: Padding(
                    padding: EdgeInsets.all(width * 0.02),
                    child: RotatedBox(
                      quarterTurns: settingProvider.isRTL ? 2 : 0,
                      child: ArrowBackIcon(
                        color: color!,
                      ),
                    ),
                  ),
                ),
              if(actionWidget != null)
                Align(
                    alignment: Alignment.centerLeft,
                    child: actionWidget!)
            ],
          );
        });
  }
}

note: i have TextView (a widget that i modularized it as Text) and ArrowBackIcon (a widget that i modularized it as Icon),

if you mean you want to change the status again, my idea is: you can hide your status bar like this video and you can create your own status bar ,but note that it is not going to be well in most of the phones. happy coding... Moraghebe khodet bash ;)