Map 데이터 타입 활용, PageView 넘기기 이벤트 - PageController 활용, FloatingActionButton 2개

[name27]

main.dart

import 'package:dictionary_app/main_page.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const DictionaryApp());
}
class DictionaryApp extends StatelessWidget {
  const DictionaryApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.from(colorScheme: ColorScheme.dark()),
      home: MainPage(),
    );
  }
}

main_Page.dart

import 'package:dictionary_app/WordTile.dart';
import 'package:flutter/material.dart';

class MainPage extends StatelessWidget {
  const MainPage({super.key});
  @override
  Widget build(BuildContext context) {
    PageController _pageController = PageController();
    int pageIndex = 0;
    List<Map<String, dynamic>> wordList = [
      {
        "eWord": "apple",
        "kWord": "사과",
        "example": '"I eat Apple"',
      },
      {
        "eWord": "window",
        "kWord": "창문",
        "example": '"open a window"',
      },
      {
        "eWord": "cancel",
        "kWord": "취소하다",
        "example": '"cancel a contract"',
      },
      {
        "eWord": "translate",
        "kWord": "번역하다",
        "example": '"a loose translation"',
      },
      {
        "eWord": "apology",
        "kWord": "사죄",
        "example": '"demand apology and reflection"',
      },
      {
        "eWord": "self-reflection",
        "kWord": "반성",
        "example":
            '"The election defeat led to an introspection within the party."',
      }
    ];
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),
      body: PageView.builder(
        controller: _pageController,
        itemCount: wordList.length,
        itemBuilder: (context, index) => WordTile(
          engWord: wordList[index]['eWord'],
          korWord: wordList[index]['kWord'],
          example: wordList[index]['example'],
        ),
      ),
      floatingActionButton: Stack(
        children: [
          Align(
            alignment:
                Alignment(Alignment.bottomLeft.x + 0.2, Alignment.bottomLeft.y),
            child: FloatingActionButton(
              onPressed: () {
                if (pageIndex > 0 && pageIndex <= wordList.length) pageIndex--;
                _pageController.animateToPage(pageIndex,
                    duration: Duration(seconds: 1), curve: Curves.linear);
              },
              child: Icon(Icons.navigate_before),
            ),
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: FloatingActionButton(
              onPressed: () {
                if (pageIndex >= 0 && pageIndex < wordList.length - 1)
                  pageIndex++;
                _pageController.animateToPage(pageIndex,
                    duration: Duration(seconds: 1), curve: Curves.linear);
              },
              child: Icon(Icons.navigate_next),
            ),
          ),
        ],
      ),
    );
  }
}

WordTile.dart

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

class WordTile extends StatelessWidget {
  const WordTile(
      {super.key,
      required this.engWord,
      required this.korWord,
      required this.example});
  final String engWord;
  final String korWord;
  final String example;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          engWord,
          style: TextStyle(
            fontSize: 30,
            fontWeight: FontWeight.bold,
            letterSpacing: -1
          ),
        ),
        Text(
          korWord,
          style: TextStyle(
            color: Colors.white54,
            letterSpacing: -1
          ),
        ),
        SizedBox(height: 8,),
        Text(
          example,
          style: TextStyle(
            color: Colors.white54,
            letterSpacing: 1,
          ),
          textAlign: TextAlign.center,
        ),
      ],
    );
  }
}

[name27]

Page컨트롤러

[name27]

main_page.dart 수정

import 'package:flutter/material.dart';

class MainPage extends StatelessWidget {
  const MainPage({super.key});
  @override
  Widget build(BuildContext context) {
    var _pageController = PageController();
    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."
  },
];
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),
      body: PageView.builder(
        controller: _pageController,
        itemCount: words.length,
        itemBuilder: (context, index) => Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              words[index]["word"].toString(),
              style: TextStyle(
                fontSize: 30,
                letterSpacing: -1,
                fontWeight: FontWeight.bold
              ),
            ),
            SizedBox(height: 8,),
            Text(
              words[index]["meaning"]!,
              style: TextStyle(
                letterSpacing: -1,
                color: Colors.grey,
                fontWeight: FontWeight.bold
              ),
            ),
            SizedBox(height: 16,),
            Text(
              '"${words[index]["example"]!}"',
              style: TextStyle(
                letterSpacing: 1,
              ),
              textAlign: TextAlign.center,
            ),
          ],
        )
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            FloatingActionButton(
              child: Icon(Icons.navigate_before),
              onPressed: (){
                _pageController.previousPage(duration: Duration(seconds: 1), curve: Curves.easeIn);
              }
            ),
            FloatingActionButton(
              child: Icon(Icons.navigate_next),
              onPressed: (){
                _pageController.nextPage(duration: Duration(seconds: 1), curve: Curves.easeIn);
              }
            ),
          ],
        ),
      ),
    );
  }
}