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