使用 FutureBuilder 透過非同步 http 的方式 取用網路上的資源。

main.dart

import 'package:flutter/material.dart';

import 'package:http_client_sample/screens/future_builder_screen.dart';



void main() {

  runApp(const AppEntryPoint());

}



class AppEntryPoint extends StatelessWidget {

  const AppEntryPoint({super.key});



  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      routes: {

        "/remote-data":(context) => const FutureBuilderScreen()

      },

      initialRoute: "/remote-data",

    );

  }

}

screens\future_builder_screen.dart

import 'package:flutter/material.dart';

import 'package:http/http.dart' as http;



class FutureBuilderScreen extends StatelessWidget {

  const FutureBuilderScreen({super.key});



  Future<dynamic> getDataFromRemote() async {

    var url = Uri.parse('https://jsonplaceholder.typicode.com/posts');  // use get method

    var response = await http.get(url);

    return response.body;

  }



  @override

  Widget build(BuildContext context) {

    return FutureBuilder(

      future: getDataFromRemote(), 

      initialData: const [],

      builder: (BuildContext context, AsyncSnapshot<dynamic> asyncSnapshot) {

        return Scaffold (

          body: Text(asyncSnapshot.data.toString()),);

      }

    );

  }

}

pubspec.yaml