<aside> ❓ 제공되는 단어데이터를 활용하여 다음의 UI를 만들어주세요.

• 단어 데이터 확인하기 (기본 5개이며 추가가능, 본인의 단어 데이터 활용가능)

• Requirements

  • FloatingActionButton이 두 개가 떠있는 형태로, 양쪽에 위치합니다.
    • 왼쪽 버튼을 클릭하면, 이 전 단어로 이동합니다.
    • 오른쪽 버튼을 클릭하면, 이 다음 단어로 이동합니다.
  • ThemeData.dark() 를 활용합니다.
  • 단어와 뜻의 자간을 -1만큼 좁혀봅니다. 예문은 1만큼의 자간을 갖도록 합니다.
  • 단어는 최소 5개 이상으로 준비합니다. </aside>

• Main.dart

  import 'package:flutter/material.dart';
  
  import 'WordPage.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: WordPage()
      );
    }
  }
  

• words.dart

  List<Map<String, String>> words = [
    {
      "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."
    },
  ];
  

• WordPage.dart

  import 'package:flutter/material.dart';
  import 'words.dart';
  
  class WordPage extends StatelessWidget {
    const WordPage({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      var pageController = PageController();
  
      return Scaffold(
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: PageView.builder(
              physics: NeverScrollableScrollPhysics(),
              controller: pageController,
              itemCount: words.length,
              itemBuilder: (context, index) {
                return Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text(words[index]['word']!,
                      style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),),
                    Text(words[index]['meaning']!,
                      style: TextStyle(fontSize: 16, color: Colors.white54, letterSpacing: -1),),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(words[index]['example']!, textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 16, color: Colors.white54, letterSpacing: 1),),
                    ),
                  ],
                );
              },
            ),
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton:Padding(
          padding: const EdgeInsets.all(16.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              FloatingActionButton(
                onPressed: () {
                  pageController.previousPage(duration: Duration(seconds: 1), curve: Curves.linear);
                },
                child: Icon(Icons.navigate_before),
              ),
              FloatingActionButton(
                onPressed: () {
                  pageController.nextPage(duration: Duration(seconds: 1), curve: Curves.linear);
                },
                child: Icon(Icons.navigate_next),
              ),
            ],
          ),
        ),
      );
    }
  }