flutter FutureBuilder - 공부 내용 - 아무튼-작업일지

공부 내용

flutter FutureBuilder

yeji Kim

Jul 13, 20243m

참고 자료

https://eory96study.tistory.com/21

Future

서버에서 데이터를 모두 받아오기 전에 대략적으로 잠재적인 값을 결정하고 어떤 걸 보여줄지 선택하기 위해.

FutureBuilder

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(
  future: getDataFuture(), // Future 형태의 데이터를 반환하는 함수를 전달
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator(); // 데이터 로딩 중일 때 로딩 인디케이터 표시
    } else {
      if (snapshot.hasError) {
        return Text('데이터 불러오기에 실패했습니다.'); // 에러 발생시 에러 메시지 표시
      } else {
        return Text('데이터: ${snapshot.data}'); // 데이터 로딩이 완료되면 결과를 표시
      }
    }
  },
)

Subscribe to '아무튼-작업일지'

Welcome to '아무튼-작업일지'!
By subscribing to my site, you'll be the first to receive notifications and emails about the latest updates, including new posts.
Join SlashPage and subscribe to '아무튼-작업일지'!