단어 앱 제작

• 제공되는 단어데이터를 활용하여 다음의 UI를 만들어주세요.
  • 단어 데이터 확인하기 (기본 5개이며 추가가능, 본인의 단어 데이터 활용가능)
  • Requirements
    • FloatingActionButton이 두 개가 떠있는 형태로, 양쪽에 위치합니다.
      • 왼쪽 버튼을 클릭하면, 이 전 단어로 이동합니다.
      • 오른쪽 버튼을 클릭하면, 이 다음 단어로 이동합니다.
    • ThemeData.dark() 를 활용합니다.
    • 단어와 뜻의 자간을 -1만큼 좁혀봅니다. 예문은 1만큼의 자간을 갖도록 합니다.
    • 단어는 최소 5개 이상으로 준비합니다.
    •  

mail.dart코드

import 'package:assigment13/MainPage.dart';

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      theme: ThemeData.dark(),                    //테마 다크모드

      home: MainPage(),

    );

  }

}

 

코드

import 'package:flutter/material.dart';

import 'package:flutter/src/widgets/container.dart';

import 'package:flutter/src/widgets/framework.dart';

class MainPage extends StatelessWidget {           

  const MainPage({super.key});

  @override

  Widget build(BuildContext context) {

    var pageController = PageController();

    List<Map<String, dynamic>> dictionary = [

      {"word": "apple", "meaning": "사과", "example": "I want to eat an apple"},

      {

        "word": "paper",

        "meaning": "종이",

        "example": "Could you give me a paper"

      },

      {

        "word": "resilient",

        "meaning": "탄력있는, 회복력있는",

        "example": "She's a resilient girl"

      },

      {

        "word": "revoke",

        "meaning": "취소하다",

        "example":

            "The authorities have revoked their original decision to allow development of this rural area."

      },

      {

        "word": "withdraw",

        "meaning": "철회하다",

        "example":

            "After lunch, we withdrew into her office to finish our discussion in private."

      },

    ];

    return Scaffold(

      body: PageView.builder(

        controller: pageController,

        itemCount: dictionary.length,

        itemBuilder: (context, index) {

          return Center(

            child: Column(

              mainAxisAlignment: MainAxisAlignment.center,

              children: [

                Text(

                  dictionary[index]['word'].toString(),

                  style: TextStyle(

                      fontSize: 30,

                      fontWeight: FontWeight.bold,

                      letterSpacing: -1),

                ),

                Text(

                  dictionary[index]['meaning'].toString(),

                  style: TextStyle(color: Colors.grey, letterSpacing: -1),

                ),

                SizedBox(

                  height: 30,

                ),

                Text(

                  '"${dictionary[index]['example'].toString()}"',                    //따옴표""붙이려는 줄

                  style: TextStyle(color: Colors.grey, letterSpacing: 1),

                  textAlign: TextAlign.center,

                ),

              ],

            ),

          );

        },

      ),

      floatingActionButton: Row(

        mainAxisAlignment: MainAxisAlignment.spaceBetween,

        children: [

          Padding(

            padding: const EdgeInsets.only(left: 32),

            child: FloatingActionButton(

              onPressed: () {

                pageController.previousPage(

                    duration: Duration(milliseconds: 500),

                    curve: Curves.linear);

              },

              child: Icon(Icons.arrow_back_ios_new),

            ),

          ),

          FloatingActionButton(

            onPressed: () {

              pageController.nextPage(

                  duration: Duration(milliseconds: 500), curve: Curves.linear);

            },

            child: Icon(Icons.arrow_forward_ios),

          ),

        ],

      ),

    );

  }

}

Android Emulator - Pixel_XL_API_27_5554 2023-02-10 14-33-07.mp4

5.37MB

오늘 과제는 할만했다..ㅎ