본문 바로가기

Language/Dart

Flutter - FutureBuilder

Flutter - FutureBuilder

main.dart

import 'package:flutter/material.dart';
import 'src/app.dart';

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

src/app.dart

import 'package:flutter/material.dart';
import 'screens/news_list.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'HackerNews',
      home: NewsList(),
    );
  }
}

src/screens/news_list.dart

import 'package:flutter/material.dart';

class NewsList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Top News'),
      ),
      body: buildList(),
    );
  }

  Widget buildList() {
    return ListView.builder(
      itemCount: 1000,
      itemBuilder: (context, index) {
        return FutureBuilder(
          future: getFuture(),
          builder: (context, snapshot) {
            return Container(
              height: 80,
              child: snapshot.hasData
                  ? Text(
                      'Im visible $index',
                      style: TextStyle(color: Colors.blue),
                    )
                  : Text(
                      'I havent fetched yet $index',
                      style: TextStyle(color: Colors.red),
                    ),
            );
          },
        );
      },
    );
  }

  getFuture() {
    return Future.delayed(
      Duration(seconds: 1),
      () => 'hi',
    );
  }
}

Item Visible
fetchIem timeline
Future pending

 

 

'Language > Dart' 카테고리의 다른 글

Flutter - FutureBuilder  (0) 2020.09.22
Flutter Animation  (0) 2020.09.21
Flutter BLoC, RxDart combineLatestStream BehaviorSubject On Submit  (0) 2020.09.18
Flutter BLoC, RxDart combineLatestStream  (0) 2020.09.17
Flutter BLoC, Scoped Instances  (0) 2020.09.16
Flutter BLoC, Single Global Instance  (0) 2020.09.15