[Flutter] - 9일차 과제

1. 

// ScrollPage.dart

import 'package:flutter/material.dart';

class ScrollPage extends StatelessWidget {
  const ScrollPage({super.key});

  @override
  Widget build(BuildContext context) {
    List animalList = ['강아지', '고양이', '앵무새', '토끼', '오리', '거위', '원숭이'];

    ScrollController scrollController = ScrollController();

    void _onTabTop() {
      scrollController.animateTo(
        scrollController.position.minScrollExtent,
        duration: const Duration(
          milliseconds: 500,
        ),
        curve: Curves.linear,
      );
    }

    return Scaffold(
      appBar: AppBar(
        title: const Text("9일차 과제"),
      ),
      body: ListView.builder(
        controller: scrollController,
        itemCount: animalList.length,
        itemBuilder: (context, index) => SizedBox(
          height: 300,
          child: Center(
            child: Text("${animalList[index]}"),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _onTabTop,
        child: const Icon(Icons.vertical_align_top),
      ),
    );
  }
}

2. 

import 'package:flutter/material.dart';

class TextFieldScreen extends StatefulWidget {
  const TextFieldScreen({super.key});

  @override
  State<TextFieldScreen> createState() => _TextFieldScreenState();
}

class _TextFieldScreenState extends State<TextFieldScreen> {
  final TextEditingController _textEditingController = TextEditingController();

  String text = "";

  void onTapClear() {
    _textEditingController.text = "";
    setState(() {});
  }

  @override
  void initState() {
    super.initState();
    _textEditingController.addListener(() {
      text = _textEditingController.text;
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("2번 문제"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextField(
            controller: _textEditingController,
            onChanged: (value) {},
          ),
          Text(_textEditingController.text),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: onTapClear,
        child: const Icon(
          Icons.close,
        ),
      ),
    );
  }
}

3. 

// main.dart
import 'package:flutter/material.dart';

import 'ChoiceScreen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ChoiceScreen(),
    );
  }
}

// ChoiceScreen.dart
import 'package:flutter/material.dart';

import 'ScrollPage.dart';
import 'TextField.dart';

class ChoiceScreen extends StatelessWidget {
  const ChoiceScreen({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("9일차 과제"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => const ScrollPage(),
                    ),
                  );
                },
                child: const Text("1번 과제"),
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => const TextFieldScreen(),
                    ),
                  );
                },
                child: const Text("2번 과제"),
              ),
            ],
          ),
        ));
  }
}

viewportFraction

viewportFraction속성의 타입은 double이다.
소주점을 값을 줄 수 있다. 여기서 한 가지 알아본 점은 1이상의 수를 넣었을 때 오류는 나지 않지만 동작은 하지 않는다는 것이다.
즉, 1이상의 값을 넣어도 변화가 없고 의미가 없다는 뜻이다.
이 속성은 0 ~ 1 사이의 소수점을 사용해야 한다.
이 속성은 페이지들의 너비를 줄이는 속성이다.
그래서 양 옆의 페이지드리 줄어든 만큼 보이는 특징을 가지고 있다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});
  final PageController _pageController = PageController(viewportFraction: 0.8);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("과제"),
        ),
        body: PageView(
          controller: _pageController,
          children: [
            Container(
              color: Colors.red,
            ),
            Container(
              color: Colors.amber,
            ),
            Container(
              color: Colors.green,
            ),
            Container(
              color: Colors.yellow,
            ),
            Container(
              color: Colors.black,
            ),
          ],
        ),
      ),
    );
  }
}

두 개의 TextField 위젯에 해당 변수를 controller를 연결한 결과

두 개의 textField가 하나의 controller을 공유하고 있기 때문에 하나의 textField의 값을 입력하면 다른 textField에 값이 똑같이 들어간다.
그래서 하나의 controller를 통해서 여러 개의 textfield를 컨트롤할 수 있다.