<aside> ❓ 1. ScrollController를 활용하여 가장 상단으로 이동하는 기능을 구현합니다.

• ListView.builder 위젯을 활용하여 높이가 300인 동물 위젯을 생성합니다.

  • 이 때, 사용되는 데이터는 다음과 같습니다.

    List animalList = ['강아지', '고양이', '앵무새', '토끼', '오리', '거위', '원숭이'];
    

  • 하단의 FAB(FloatingActionButton)을 누르면, 스크롤 위치가 최상단으로 이동되게합니다.

    • 이 때, 사용되는 아이콘 명은 다음과 같습니다.

      Icons.vertical_align_top
      

</aside>

• ex01.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(
        home: AnimalList(),
      );
    }
  }
  
  class AnimalList extends StatefulWidget {
    const AnimalList({Key? key}) : super(key: key);
  
    @override
    State<AnimalList> createState() => _AnimalListState();
  }
  
  class _AnimalListState extends State<AnimalList> {
    @override
    Widget build(BuildContext context) {
      List animalList = ['강아지', '고양이', '앵무새', '토끼', '오리', '거위', '원숭이'];
      ScrollController scrollController = ScrollController();
  
      return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('9일차 과제'),
        ),
        body: ListView.builder(
          controller: scrollController,
          itemCount: animalList.length,
          itemBuilder: (context, index) {
            return SizedBox(
              height: 300,
              child: Center(child: Text(animalList[index])),
            );
          }
        ),
  
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            scrollController.animateTo(0, duration: Duration(milliseconds: 500), 
  						curve: Curves.linear);
          },
          child: Icon(Icons.vertical_align_top),
        ),
      );
    }
  }
  

  

<aside> ❓ 2. 입력된 텍스트 미러링하는 화면을 제작합니다.

• TextField에 입력시, 바로 밑에 위치한 하단의 Text위젯에 똑같이 적용되도록 합니다.
• FAB(FloatingActionButton)을 클릭하면, 작성중이던 모든 내용이 사라집니다.

  • 이 때, 사용되는 아이콘 명은 다음과 같습니다.

    Icons.close
    

</aside>

• ex02.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(
        home: TextMirroring(),
      );
    }
  }
  
  class TextMirroring extends StatefulWidget {
    const TextMirroring({Key? key}) : super(key: key);
  
    @override
    State<TextMirroring> createState() => _TextMirroringState();
  }
  
  class _TextMirroringState extends State<TextMirroring> {
    TextEditingController textController = TextEditingController();
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('2번 문제'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            TextField(
              onChanged: (text) {
                setState(() {});
              },
              controller: textController,
            ),
            Text(textController.text),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              textController.text = '';
            });
          },
          child: Icon(Icons.close),
        ),
      );
    }
  }
  

  

<aside> ❓

3. 다음과 같이 버튼 [1번 과제]와 [2번 과제]를 구성하고, 클릭시 위 수행한 과제로 각각 이동되도록 만드세요.

• 1번 과제를 클릭하면, 1번 과제의 내용 페이지로 이동됩니다.

• 2번 과제를 클릭하면, 2번 과제의 내용 페이지로 이동됩니다. </aside>

• ex03.dart

  import 'package:first_app/homework/week3/day9/ex01.dart';
  import 'package:first_app/homework/week3/day9/ex02.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(
        home: Ex03Navigation(),
      );
    }
  }
  
  class Ex03Navigation extends StatelessWidget {
    const Ex03Navigation({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('9일차 과제'),
        ),
  
        body: Align(
          alignment: Alignment.center,
          child: Column(
            children: [
              Spacer(),
              ElevatedButton(
                  onPressed: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) => AnimalList())
                    );
                  },
                  child: Text('1번 과제')
              ),
              Spacer(),
              ElevatedButton(
                  onPressed: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) => TextMirroring()));
                  },
                  child: Text('2번 과제')
              ),
              Spacer(),
            ],
          ),
        ),
      );
    }
  }
  

<aside> ❓ 4. PageView에 사용할 수 있는 PageController는 다음과 같은 속성이 포함됩니다.

var pageController = PageController(viewportFraction: ...);

• 해당 속성값(viewportFraction)에 들어가야할 데이터타입은 무엇인지 확인해보고, 속성을 통해 어떤 결과를 얻을 수 있는지 테스트하는 코드를 작성하세요. </aside>

• double 형식

• 페이지 컨트롤러에서 현재 페이지의 너비나 높이, 뷰포트의 너비나 높이 사이의 비율을 지정할 수 있다.

• 테스트 코드 (ex04.dart)

  import 'package:flutter/material.dart';
  
  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) {
      PageController pageController = PageController(viewportFraction: 0.8);
      List pages = [
        Container(color: Colors.red),
        Container(color: Colors.orange),
        Container(color: Colors.yellow),
      ];
  
      return MaterialApp(
        home: Scaffold(
          body: PageView.builder(
            controller: pageController,
            itemCount: pages.length,
            itemBuilder: (BuildContext context, int index) {
              return pages[index];
            },
          ),
        )
      );
    }
  }
  
  

  → 페이지의 양 옆에 여백에 이전, 다음 페이지가 보인다