15일차 과제 5

5. 다음의 URL에 네트워크 데이터 요청을하고, 응답 데이터를 활용하여 다음의 결과물을 제작하시오.

• URL : https://jsonplaceholder.typicode.com/photos?albumId=1

• 위 URL은 이미지와 타이틀을 List형태로 보내주는 무료 API입니다.
• 아래로 스크롤이 가능하도록 받은 데이터를 전부 나열하세요.

import 'package:flutter/material.dart';

import 'package:dio/dio.dart';

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

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: MainPage(),

    );

  }

}

class MainPage extends StatefulWidget {

  const MainPage({super.key});

  @override

  State<MainPage> createState() => _MainPageState();

}

class _MainPageState extends State<MainPage> {

  var data;

  void getData() async {

    var dio = Dio();

    var url = "https://jsonplaceholder.typicode.com/photos?albumId=1";

    var res = await dio.get(url);

    setState(() {

      data = res.data;

    });

  }

  @override

  void initState() {

    super.initState();

    getData();

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: ListView.builder(

        itemCount: data.length,

        itemBuilder: (context, index) {

          return Card(

            clipBehavior: Clip.antiAliasWithSaveLayer,           //이미지가 안깎여서 찾아봄

Flutter는 이제 몇 가지 특수 위젯(예: ClipRect)을 제외하고 기본적으로 자르지 않습니다. 클립 없음 기본값을 재정의하려면 위젯 구성에서 clipBehavior를 명시적으로 설정하십시오.

            shape:

                RoundedRectangleBorder(borderRadius: BorderRadius.circular(18)),

            child: Column(

              crossAxisAlignment: CrossAxisAlignment.start,

              children: [

                Image(image: NetworkImage(data[index]['url'])),

                Padding(

                  padding: const EdgeInsets.all(8.0),

                  child: Text(data[index]['title']),

                )

              ],

            ),

          );

        },

      ),

    );

  }

}

과제 4번처럼 그대로 하니깐 됐다

Android Emulator - Pixel_XL_API_27_5554 2023-02-17 14-22-15.mp4

7.90MB