Home > Mobile >  FutureBuilder, change AppBar text when future is loaded (with a value of class loaded)
FutureBuilder, change AppBar text when future is loaded (with a value of class loaded)

Time:06-01

I have this code:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(_model != null
          ? _model!.name // <-- HERE I GET THE ERROR
          : AppLocalizations.of(context)!.loading),
      brightness: Brightness.dark,
      backgroundColor: Theme.of(context).primaryColor,
      leading: GestureDetector(
        onTap: () {
          Navigator.of(context).pushNamed('/Home');
        },
        child: Icon(
          Icons.home,
        ),
      ),
    ),
    body: RefreshIndicator(
        key: _refreshIndicatorKey,
        onRefresh: _refresh,
        child: FutureBuilder<Model>(
          future: _model,
          builder: (BuildContext context, AsyncSnapshot<Model> snapshot) {
            switch (snapshot.connectionState) {
              case ConnectionState.waiting:
              case ConnectionState.none:
                return LoadingWidget();
              default:
                if (snapshot.hasError)
                  return Text('Error: ${snapshot.error}');
                else
                  return _build(snapshot.data!);
            }
          },
        )),
  );
}

I need to change AppBar text when Future is loaded (with the property name of the Model class), but I get this error right now:

The getter 'name' isn't defined for the type 'Future

CodePudding user response:

Try:

appBar: AppBar(
      title: FutureBuilder(
        future: _model,
        builder: (context, snapshot){
         return Text(!_model.hasData
           ? _model!.name,
          : AppLocalizations.of(context)!.loading);
        }
      ),
      brightness: Brightness.dark,
      backgroundColor: Theme.of(context).primaryColor,
      leading: GestureDetector(
        onTap: () {
          Navigator.of(context).pushNamed('/Home');
        },
        child: Icon(
          Icons.home,
        ),
      ),
    ),
)

CodePudding user response:

The argument type 'FutureBuilder<Object?>' can't be assigned to the parameter type 'PreferredSizeWidget?

Flutter appBar is PreferredSizeWidget. for that you occur this error.

you return Text Widget but it only except PreferredSizeWidget

   class MainAppBar extends StatefulWidget implements PreferredSizeWidget {
 const MainAppBar(
  {Key? key,
  this.assetName,
  required this.appBarTitle,
  this.icon,
  this.onEditTrip})
  : super(key: key);

final String? assetName;
final String appBarTitle;
final Widget? icon;
 final Function()? onEditTrip;

@override
 State<MainAppBar> createState() => _MainAppBarState();

@override
Size get preferredSize => const Size.fromHeight(58);
}

class _MainAppBarState extends State<MainAppBar> {

@override
Widget build(BuildContext context) {
return AppBar(
  iconTheme: const IconThemeData(color: ColorCode.iconColor),
  elevation: 0,
  backgroundColor: ColorCode.scaffoldBackgroundColor,
  title: Text(
    widget.appBarTitle,
    style: CustomTextStyle().title20TextStyle,
  ),
  centerTitle: true,
  actions: [
    if (widget.assetName != null) SvgPicture.asset(widget.assetName!),
    if (widget.icon != null)
      GestureDetector(
        onTap: widget.onEditTrip!,
        child: widget.icon
      ),
    SizedBox(
      width: 5.w,
    )
  ],
  actionsIconTheme: const IconThemeData(color: ColorCode.iconColor),
   );
  }
 }

You can create custom app bar for that up this code. and if your future response not return yet you pass empty string.

  • Related