Flutter) 비동기를 위한 FutureBuilder

Future 란?

오늘은 FutureBuilder에 대해 올려볼려고 한다. flutter의 경우 비동기 통신을 사용하고 있는데 이는 동기식 통신과 다르게 서버에서 데이터를 모두 받아오기전 화면을 그려줄수 있게 되는 장점을 가질수가 있다.  

 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의 경우 String을 반환하는 비동기 함수이다. 2초의 듀레이션을 두어 데이터를 받아오는것처럼 동작하도록 했다. 그리고 getting.then부분에서 해당 함수가 사용이 되게 되는데 제대로 일을 하게 됐을때는 then, 해당 함수에 문제가 발생하게 되면 catchError부분을 실행하게 된다. 그리고 마지막 코드의 경우 then과 catcthError를 awiat와 async를 사용하여 비동기 작업을 하는 방식이다. (async와 await는 한쌍으로 생각을 하여야 한다. await를 쓰는 함수들은 모두 async를 사용하여야 한다.)

 

FutureBuilder의 사용

• FutureBuilder : 앞서 말했던 Future를 사용하는 이유처럼 데이터를 다 받기전에 먼저 데이터가 없이 그릴수 없는 부분을 먼저 그려주기 위해 사용이 이 되는 것이다. 만약 FutureBuilder가 없다면 데이터가 다 받아지기를 기다린후 화면을 그리거나 데이터가 변함을 setState()를 통해 바꾸어 주어야 할것이다.
• 아래의 코드는 FutureBuilder를 이용한 예제 이다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Future Builder Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '이곳은 데이터 상관없이 불려져 오는 곳입니다.',
              style: TextStyle(fontSize: 20),
            ),
            FutureBuilder(
                future: _fetch1(),
                builder: (BuildContext context, AsyncSnapshot snapshot) {
                  //해당 부분은 data를 아직 받아 오지 못했을때 실행되는 부분을 의미한다.
                  if (snapshot.hasData == false) {
                    return CircularProgressIndicator();
                  }
                  //error가 발생하게 될 경우 반환하게 되는 부분
                  else if (snapshot.hasError) {
                    return Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        'Error: ${snapshot.error}',
                        style: TextStyle(fontSize: 15),
                      ),
                    );
                  }
                  // 데이터를 정상적으로 받아오게 되면 다음 부분을 실행하게 되는 것이다.
                  else {
                    return Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        snapshot.data.toString(),
                        style: TextStyle(fontSize: 15),
                      ),
                    );
                  }
                })
          ],
        ),
      ),
    );
  }

  Future<String> _fetch1() async {
    await Future.delayed(Duration(seconds: 2));
    return 'Call Data';
  }
}

• FutureBuilder의 경우 데이터를 직접적으로 불러오는 곳에 많이 쓰이게 된다. 이는 대게 api 호출과같이 데이터를 불러오는 시간이 어느정도 걸리는곳에서 많이 사용되어 지고 있다.