15일차 과제4

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

URL : https://sniperfactory.com/sfac/http_json_data

• 이 때, StatefulWidget을 생성하고 다음의 코드를 사용할 수 있도록 합니다. getData는 네트워크에 데이터를 요청하는 코드입니다. 그 외 해결방법은 자유입니다.
•  

응답 데이터:

{"item":{"name":"스나이퍼팩토리 플러터 과정","description":"스나이퍼팩토리의 플러터 과정입니다! 지금 바로 신청해볼까요?","image":"https://picsum.photos/200/200","price":4000000}}

 

내 코드

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://sniperfactory.com/sfac/http_json_data";

    var res = await dio.get(url);

    setState(() {

      data = res.data;

    });

  }

  @override

  void initState() {

    super.initState();

    getData();

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: Center(

        child: Card(

          margin: EdgeInsets.symmetric(vertical: 150, horizontal: 105),

          shape: RoundedRectangleBorder(

            borderRadius: BorderRadius.circular(16),

          ),

          child: Column(

            crossAxisAlignment: CrossAxisAlignment.start,

            children: [

              Image(

                image: NetworkImage(data['item']['image']),

                fit: BoxFit.cover,

              ),

              Padding(

                padding: const EdgeInsets.all(8.0),

                child: Text(

                  data['item']['name'],

                  style: TextStyle(fontWeight: FontWeight.bold),

                ),

              ),

              Divider(thickness: 1, height: 1, color: Colors.grey),

              Padding(

                padding: const EdgeInsets.all(8.0),

                child: Text(data['item']['description']),

              ),

              Padding(

                padding: const EdgeInsets.fromLTRB(9, 5, 0, 0),

                child: ElevatedButton(

                    onPressed: () {},

                    child: Text('${data['item']['price']}원 결제하고 등록')),

              )

            ],

          ),

        ),

      ),

    );

  }

}