FutureBuilder 란?

목적

Firebase Login 을 위해 사용되었던 FutureBuilder를 완전한 이해를 위해서 포스팅

Future 란?

미래의 잠재적인 값을 결정해 놓고
정보를 가져오는동안 다른것을 보여주기 위해 사용
따라서 Future의 상태를 확실히 파악해야 한다.

아래의 코드를 예시로 들어보겠다.

Future<String> getting = Future<String>.delayed(
  Duration(seconds: 2),
  () => 'Data Loaded',
);


 getting.then((value) => handleValue(value))
 	.catchError((error) => handleError(error));
    
 
 try{
 	String a = await getting();
    	handleVlaue(value);
} catch(error){
	handleError(error);
}

• getting은 2초뒤 데이터를 가져온다
• 정상 실행 되었을때 getting.then
• 비정상 실행 되었을때 getting.catchError

FutureBuilder의 사용

FutureBuilder가 없다면, 데이터를 다 받아오기 전에 화면을 보여주려면 setState()를 활용하여 화면을 변경해줘야 함

아래의 예제는 https://firebase.flutter.dev/docs/overview 에서 가져왔다.

import 'package:flutter/material.dart';

// Import the firebase_core plugin
import 'package:firebase_core/firebase_core.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(App());
}

class App extends StatelessWidget {
  // Create the initialization Future outside of `build`:
  final Future<FirebaseApp> _initialization = Firebase.initializeApp();

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      // Initialize FlutterFire:
      future: _initialization,
      builder: (context, snapshot) {
        // 에러가 발생하였을때 나타나는 화면
        if (snapshot.hasError) {
          return SomethingWentWrong();
        }
   

        // 정상 실행 시 화면
        if (snapshot.connectionState == ConnectionState.done) {
          return MyAwesomeApp();
        }

        // 로딩 중 뜨는 화면
        return Loading();
        //OR
        //해당 부분은 data를 아직 받아 오지 못했을때 실행되는 부분을 의미한다.
        if (snapshot.hasData == false) {
		return CircularProgressIndicator();
	}
      },
    );
  }
}

FutureBuilder가 없을때

import 'package:flutter/material.dart';

// Import the firebase_core plugin
import 'package:firebase_core/firebase_core.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(App());
}

class App extends StatefulWidget {
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  // Set default `_initialized` and `_error` state to false
  bool _initialized = false;
  bool _error = false;

  // Define an async function to initialize FlutterFire
  void initializeFlutterFire() async {
    try {
      // Wait for Firebase to initialize and set `_initialized` state to true
      await Firebase.initializeApp();
      setState(() {
        _initialized = true;
      });
    } catch(e) {
      // Set `_error` state to true if Firebase initialization fails
      setState(() {
        _error = true;
      });
    }
  }

  @override
  void initState() {
    initializeFlutterFire();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // Show error message if initialization failed
    if(_error) {
      return SomethingWentWrong();
    }

    // Show a loader until FlutterFire is initialized
    if (!_initialized) {
      return Loading();
    }

    return MyAwesomeApp();
  }
}