ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 단어 앱 제작
    카테고리 없음 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

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

Designed by Tistory.