9일차 과제 - rlatkddbs99/Flutter GitHub Wiki

캡처3

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: FirstPage(),
    );
  }
}

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

  @override
  State<FirstPage> createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  @override
  Widget build(BuildContext context) {
    final List animalList = ['강아지', '고양이', '앵무새', '토끼', '오리', '거위', '원숭이'];
    final ScrollController scrollController = ScrollController();

    void _scrollToTop() {
      setState(() {
        scrollController.jumpTo(0);
      });
    }

    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _scrollToTop();
        },
        child: Icon(Icons.vertical_align_top),
      ),
      appBar: AppBar(
        centerTitle: true,
        title: Text("9일차 과제"),
      ),
      body: ListView.builder(
          itemCount: 7,
          controller: scrollController,
          itemBuilder: (BuildContext contet, int index) {
            return Container(
              height: 300,
              child: Text("${animalList[index]}"),
            );
          }),
    );
  }
}

캡처4

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

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


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

  @override
  State<SecondPage> createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  String inputText = "";
  var myController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("9일차 과제"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          myController.text = "";
        },
        child: Icon(Icons.close),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            TextField(
              controller: myController,
              onChanged: (text) {
                setState(() {
                  inputText = text;
                });
              },
            ),
            Text('$inputText'),
          ],
        ),
      ),
    );
  }
}

캡처5

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

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


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

  @override
  State<ThirdPage> createState() => _ThirdPageState();
}

class _ThirdPageState extends State<ThirdPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("9일차 과제"),
      ),
      body: Center(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(150.0),
              child: ElevatedButton(
                  onPressed: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => FirstPage(),
                        ));
                  },
                  child: Text("1번과제")),
            ),
            ElevatedButton(
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => SecondPage(),
                      ));
                },
                child: Text("2번과제"))
          ],
        ),
      ),
    );
  }
}

캡처6

viewportFraction 속성 : 각 페이지가 차지하는 표시 영역의 비율입니다.

기본값은 1.0으로 각 페이지가 스크롤 방향으로 뷰포트를 채웁니다. 0~1까지 double DataType으로 값을 준다. 테스트코드를 보면 해당 페이지의 옆 페이지가 화면의 부분을 차지하고 있는 모습을 볼 수 있다. 기본값은 1로 한 화면을 꽉채우는 설정이 기본값이다.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    var pageController = PageController(viewportFraction: 0.7);
    return MaterialApp(
      home: Scaffold(
        body: DefaultTextStyle(
          style: TextStyle(fontSize: 36, color: Colors.black),
          child: SafeArea(
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: PageView(
                //행동제한, 사용자가 스와이프로 넘어가기 불가, 컨트롤러로는 가능
                controller: pageController,
                children: [
                  Text("A페이지"),
                  Text("B페이지"),
                  Text("C페이지"),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

캡처7

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    var myController =
        TextEditingController(); //매개변수로 text를 주고 String값을 주면 처음 부터 text값 가지고 시작 가능
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
            child: Column(
          children: [
            TextField(
              controller: myController,
            ),
            TextField(
              controller: myController,
            ),
            TextButton(
              onPressed: () {
                print(myController.text); //출력버튼
              },
              child: Text("hit"),
            ),
          ],
        )),
      ),
    );
  }
}

같은 컨트롤러를 연결하면 텍스트 필드 중 한개를 고치더라도 같이 고쳐지는 효과가 보인다. 또한 출력도 한 번만 실행이 되는 모습을 볼 수 있다. 이 점으로 보았을 때 컨트롤러가 동일하다면 서로 다른 위젯이더라도 같은 효과가 나타날 것 같다.

9일차 과제 - rlatkddbs99/Flutter GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️