Flutter Get Userinfo from Api an use it everywhere

Question

I´m new to flutter and need some help. I want to use the username in my drawer but i can´t acess the data. I always get an Instance of 'Future<LoginResponseModel?>. How can i get acesss to firstname,lastname... after the authentication and then how can i use it everywhere in my code for example in mydrawer to be shwon? Please help me

    LoginResponseModel.fromJson(json.decode(str));

class LoginResponseModel {
  LoginResponseModel({
    required this.message,
    required this.data,
  });
  late final String message;
  late final Data data;

  LoginResponseModel.fromJson(Map<String, dynamic> json) {
    message = json['message'];
    data = Data.fromJson(json['data']);
  }

  Map<String, dynamic> toJson() {
    final _data = <String, dynamic>{};
    _data['message'] = message;
    _data['data'] = data.toJson();
    return _data;
  }
}

class Data {
  Data({
    required this.username,
    required this.email,
    required this.date,
    required this.id,
    required this.token,
  });
  late final String username;
  late final String email;
  late final String date;
  late final String id;
  late final String token;

  Data.fromJson(Map<String, dynamic> json) {
    username = json['username'];
    email = json['email'];
    date = json['date'];
    id = json['id'];
    token = json['token'];
  }

  Map<String, dynamic> toJson() {
    final _data = <String, dynamic>{};
    _data['username'] = username;
    _data['email'] = email;
    _data['date'] = date;
    _data['id'] = id;
    _data['token'] = token;
    return _data;
  }
}

The Shared Service where the data should be stored!

  static Future<LoginResponseModel?> loginDetails() async {
    var isKeyExist =
        await APICacheManager().isAPICacheKeyExist("login_details");

    if (isKeyExist) {
      var cacheData = await APICacheManager().getCacheData("login_details");

      return loginResponseJson(cacheData.syncData);
    }
  }

The Homepage where i tested what data is stored in the logindetails, but in console its schown: I/flutter ( 5992): Instance of 'Future<LoginResponseModel?>'

import 'package:flutter/material.dart';
import 'package:join_coins/pages/pay.dart';
import 'package:join_coins/pages/portfolio.dart';
import 'package:join_coins/pages/trade.dart';
import 'package:join_coins/pages/withdraw.dart';
import 'package:join_coins/services/api_service.dart';
import 'package:join_coins/services/shared_service.dart';
import 'package:join_coins/widgets/appbar_widget.dart';
import 'package:join_coins/widgets/navigation_drawer_widget.dart';

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

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

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  final screens = [HomePage(), Portfolio(), Withdraw(), Trade(), Pay()];

  var test = SharedService.loginDetails();

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: MyAppBar(
          title: "Homie",
        ),
        backgroundColor: Colors.white,
        body: userProfile(),
        drawer: NavigationDrawerWidget(),
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          backgroundColor: Colors.black,
          selectedItemColor: const Color.fromRGBO(0, 82, 255, 1.0),
          unselectedItemColor: Colors.white,
          iconSize: 30,
          elevation: 15,
          selectedFontSize: 12,
          currentIndex: _currentIndex,
          onTap: (index) => setState(() => _currentIndex = index),
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Startseite',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.pie_chart_outline),
              label: 'Portfolio',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.sync),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.trending_up),
              label: 'Handeln',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.toll),
              label: 'Bezahlen',
            ),
          ],
        ),
      );
}

Widget userProfile() {
  return FutureBuilder(
    future: APIService.getUserProfile(),
    builder: (BuildContext context, AsyncSnapshot<String> model) {
      if (model.hasData) {
        print(SharedService.loginDetails());
        return Center(
            child: Text(
          model.data!,
          style: TextStyle(fontSize: 25, color: Colors.red),
        ));
      }
      return const Center(
        child: CircularProgressIndicator(),
      );
    },
  );
}

The Drawer class where i want to use the data from api(firstname,lastname,username...) to been shown.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:join_coins/pages/home.dart';
import 'package:join_coins/services/shared_service.dart';
import 'package:snippet_coder_utils/FormHelper.dart';
import 'package:snippet_coder_utils/hex_color.dart';

class NavigationDrawerWidget extends StatelessWidget {
  final padding = EdgeInsets.symmetric(horizontal: 20, vertical: 80);
  final firstName = "test";
  final lastName = "test";
  final userImage =
      "https://www.pinclipart.com/picdir/middle/148-1486972_mystery-man-avatar-circle-clipart.png";

  NavigationDrawerWidget({Key? key, firstName, lastName, userImage})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Material(
        color: Colors.grey[850],
        child: ListView(
          padding: padding,
          children: <Widget>[
            buildHeader(
              userImage: userImage,
              firstName: firstName,
              lastName: lastName,
            ),
            const SizedBox(height: 20),
            buildMenuItem(
              text: "Kennenlernen und verdienen",
              icon: Icons.auto_awesome_outlined,
              onClicked: () => selectedItem(context, 0),
            ),
            const SizedBox(height: 20),
            buildMenuItem(
              text: "Coins erhalten",
              icon: CupertinoIcons.percent,
              onClicked: () => selectedItem(context, 1),
            ),
            const SizedBox(height: 20),
            buildMenuItem(
              text: "Freunde einladen",
              icon: Icons.person_add_alt_1_outlined,
              onClicked: () => selectedItem(context, 2),
            ),
            const SizedBox(height: 20),
            buildMenuItem(
              text: "Geschenk senden",
              icon: CupertinoIcons.gift,
              onClicked: () => selectedItem(context, 3),
            ),
            const SizedBox(height: 200),
            new Center(
              child: FormHelper.submitButton(
                "Abmelden",
                () {
                  SharedService.logout(context);
                },
                width: 450,
                btnColor: HexColor("#00ff001C"),
                borderColor: Colors.grey,
                txtColor: Colors.white,
                borderRadius: 10,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

buildHeader({
  required String firstName,
  required String lastName,
  required String userImage,
  VoidCallback? onClicked,
}) =>
    InkWell(
      onTap: onClicked,
      child: Container(
        child: Row(
          children: [
            CircleAvatar(
              radius: 30,
              backgroundImage: NetworkImage(userImage),
            )
          ],
        ),
      ),
    );

void selectedItem(BuildContext context, int index) {
  Navigator.of(context).pop();

  switch (index) {
    case 0:
      Navigator.of(context).push(MaterialPageRoute(
        builder: (context) => HomePage(),
      ));
      break;
    case 1:
      Navigator.of(context).push(MaterialPageRoute(
        builder: (context) => HomePage(),
      ));
      break;
    case 2:
      Navigator.of(context).push(MaterialPageRoute(
        builder: (context) => HomePage(),
      ));
      break;
    case 3:
      Navigator.of(context).push(MaterialPageRoute(
        builder: (context) => HomePage(),
      ));
      break;
  }
}

Widget buildMenuItem({
  required String text,
  required IconData icon,
  VoidCallback? onClicked,
}) {
  final color = Colors.white;
  return ListTile(
    leading: Icon(icon, color: color),
    title: Text(
      text,
      style: TextStyle(color: color, fontWeight: FontWeight.bold, fontSize: 20),
    ),
    onTap: onClicked,
  );
}

Answer 1

You can try using the http package to get data from the API