카테고리 없음

단어 앱 제작

신승호. 2023. 2. 10. 14:34
  • 제공되는 단어데이터를 활용하여 다음의 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

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