How to save a username locally and display it in every page flutter

SharedPreferences is good for storing data, but as you have seen it isn't great for using everywhere - the main issue being that it needs to be loaded asynchronously. You could simply get it when the application starts running and then pass it around everywhere you need it, but that isn't particularly ideal.

What I've done in my application, which feels a little bit like cheating but has worked very well so far, is to wrap the SharedPreferences into a Model from the ScopedModel package.

This allows me to write some very convenient wrappers. And since getting data out of the scoped model is synchronous, it makes using SharePreferences pretty easy.

That looks like this:

abstract class _PreferenceKeys {
  static const USERNAME = 'username';
}

class PreferenceModel extends Model {
  static PreferenceModel of(BuildContext context, {bool rebuildOnChange = false}) => ScopedModel.of<PreferenceModel>(context, rebuildOnChange: rebuildOnChange);


  final SharedPreferences sharedPreferences;

  PreferenceModel(this.sharedPreferences);

  // Helpers to set in values which ensure that notifyListeners gets called
  Future<bool> _setString(String key, String value, {bool notify = true}) async {
    final val = await sharedPreferences.setString(key, value);
    if (notify) notifyListeners();
    return val;
  }
  Future<bool> _setBool(String key, bool value, {bool notify = true}) async {
    final fut = await sharedPreferences.setBool(key, value);
    if (notify) notifyListeners();
    return fut;
  }

  String get username => sharedPreferences.getString(_PreferenceKeys.USERNAME);

  void set username(String username) => _setString(_PreferenceKeys.USERNAME, userName);

The biggest downside to this approach is that any errors in the _setString method don't get propagated back out - you could use Future functions for setting the username if that's an issue you'd like to deal with, or do something in _setString to handle it. I personally haven't had any problems though.

There's one more trick that goes with this. You can make the main function of your application asynchronous, which means that you can do this:

main() async {
  final sharedPreferences = await SharedPreferences.getInstance();

  runApp(
    ScopedModel<PreferenceModel>(
      model: PreferenceModel(sharedPreferences),
      child: ...
    ),
  )
}

And then to use this in your code, you can simply use:

PreferenceModel.of(context).userName

 or

PreferenceModel.of(context, rebuildOnChange: true).userName

or

child: ScopedModelDescendant<PreferenceModel>(
  child: ...
  builder: (context, model, child) {
    // do whatever with model
    return ...
  }
)

If you want to do it exactly your way - you can wrap Text inside FutureBuilder

Future<String> _get() async {
    final prefs = await SharedPreferences.getInstance();
    final name = "username";
    var username = prefs.getString(name);
    return username;
  }

ListTile(
  title: FutureBuilder(builder: (context, snapshot) {
    if (snapshot.hasData) return Text(snapshot.data);
    else return Text('');
  }, future: _get(),),.....),

UPD:

For saving name in variable

String name = '';

@override
void initState() {
  super.initState();
  _get().then((value) {
    setState(() {
      name = value;
    });
  });
}

What you can do is In initstate you get the data and use "then" keyword assign a username to variable and use the variable across your storage and also build your app inside "then". It waits until you get the data and then build your app

Why don't you use Secure Storage Plugin?

// Create storage
final storage = new FlutterSecureStorage();

// Read value 
String value = await storage.read(key: key);

// Read all values
Map<String, String> allValues = await storage.readAll();

// Delete value 
await storage.delete(key: key);

// Delete all 
await storage.deleteAll();

// Write value 
await storage.write(key: key, value: value);