Why is flutter printing out widget name?

Question

I have a problem with flutter printing out the name and rendering Widget name after running the application

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  autoLogin() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    bool? loggedIn = prefs.getBool('loggedin');
    if (loggedIn == true) {
       Home();
    } else {
      return LoginOrSignup();
    }
  }

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(body:SafeArea(
          child: FutureBuilder(
            future: autoLogin(),
            builder: (BuildContext context, snapshot) {
              if (snapshot.hasData) {
                return Text('${snapshot.data}');
              } else {
                return LoginOrSignup();
              }
            }),

        ))
    );
  }
}

After running the app the output is LoginOrSignup()

class LoginOrSignup extends StatelessWidget {
  const LoginOrSignup({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Center(
            child: MaterialButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Login()),
                );

              },
              child: Text('Loginsss'),
            ),
          ),
          Center(
            child: MaterialButton(
              onPressed: (){
                 Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Signup()),
                );
              },
              child: Text('Signup'),
            ),
          )
        ],
      ),
    );
  }
}

I have tried using another widget like Text() but it still prints out the same when i run the application on a mobile app. The problem seems to appear in the autoLogin() function that i have

Answer 1

The issue is your future return Widget itself, and when you use Text('${snapshot.data}') it print the widget, To simplfity this you can return data from Future(this is what mostly we do). Let say you like to return widget itself.

A little correction is needed on Future.

  Future<Widget> autoLogin() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    bool? loggedIn = prefs.getBool('loggedin');
    if (loggedIn == true) {
      return Home();
    } else {
      return LoginOrSignup();
    }
  }

And

return MaterialApp(
    home: Scaffold(
        body: SafeArea(
  child: FutureBuilder<Widget>(
    future: autoLogin(),
    builder: (BuildContext context, snapshot) {
      if (snapshot.hasData) {
        return snapshot.data!;
      } else {
        return LoginOrSignup();
      }
    }),
)));

Answer 2

You are returning a Widget in autoLogin function. Instead you should return a bool .

Future<bool?> autoLogin() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    bool? loggedIn = prefs.getBool('loggedin');
if (loggedIn == null) return null;
    if (loggedIn == true) {
       return true;
    } else {
      return false;
    }
  }

Then in the FutueBuilder you can check if it's then return Home()

if (snapshot.hasData && snapshot.data! == true) {
                return Home();
              } else {
                 return LoginOrSignup();