카테고리 없음

스나이퍼팩토리 9일차 과제1,2,3

신승호. 2023. 2. 7. 02:08

1번 과제

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

  • ListView.builder 위젯을 활용하여 높이가 300인 동물 위젯을 생성합니다.
    • 이 때, 사용되는 데이터는 다음과 같습니다.
    • List animalList = ['강아지', '고양이', '앵무새', '토끼', '오리', '거위', '원숭이'];
  • 하단의 FAB(FloatingActionButton)을 누르면, 스크롤 위치가 최상단으로 이동되게합니다.
    • 이 때, 사용되는 아이콘 명은 다음과 같습니다.

아래는 1번 과제를 한 나의 메인코드

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    List animalList = ['강아지', '고양이', '앵무새', '토끼', '오리', '거위', '원숭이'];
    var scrollController = ScrollController();   //컨트롤러 선언
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text(
            '9일차 과제',
          ),
        ),
        body: SafeArea(
          child: ListView.builder(
            controller: scrollController,
            itemCount: 7,
            itemBuilder: (Context, int index) {
              return GestureDetector(
                child: Container(
                  alignment: Alignment.topCenter, //동물들 가운데위로 배치
                  height: 300,
                  decoration: BoxDecoration(        //처음 그라데이션으로 확인하려고 했던 위젯..그냥써버림
                    color: Colors.green,
                  ),
                  child: Text(animalList[index]),    //동물순서대로
                ),
              );
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            scrollController.jumpTo(0);           //9일차 퇴근문제에 나왔던 jumpTo 리스트 최상단으로
          },
          child: Icon(Icons.vertical_align_top),
        ),
      ),
    );
  }
}

Android Emulator - Pixel_XL_API_27_5554 2023-02-06 16-39-50.mp4
5.20MB

 

2번 과제

 

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

  • TextField에 입력시, 바로 밑에 위치한 하단의 Text위젯에 똑같이 적용되도록 합니다.
  • FAB(FloatingActionButton)을 클릭하면, 작성중이던 모든 내용이 사라집니다.
    • 이 때, 사용되는 아이콘 명은 다음과 같습니다.
    • Icons.close
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: MainPage(),
    );
  }
}

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

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  var myController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('2번 문제'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextField(
            controller: myController,
            onChanged: (value) {
              setState(() {});
            },
          ),
          Text(
            myController.text,
            style: TextStyle(color: Colors.black),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (() {
          setState(() {
            myController.clear();
          });
        }),
        child: Icon(Icons.close),
      ),
    );
  }
}

Android Emulator - Pixel_XL_API_27_5554 2023-02-07 01-30-13.mp4
4.81MB

3번 과제

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

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

아래는 메인페이지

import 'package:assigment9/firstpage.dart';
import 'package:assigment9/secondpage.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: MainPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('9일차 과제'),
      ),
      body: Center(
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => firstPage(),
                  ),
                );
              },
              child: Text('1번 과제')),
          ElevatedButton(
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => secondPage()));
              },
              child: Text('2번 과제'))
        ]),
      ),
    );
  }
}
아래는 첫번째페이지
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    List animalList = ['강아지', '고양이', '앵무새', '토끼', '오리', '거위', '원숭이'];
    var scrollController = ScrollController(); //컨트롤러 선언
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text(
            '9일차 과제',
          ),
        ),
        body: SafeArea(
          child: ListView.builder(
            controller: scrollController,
            itemCount: 7,
            itemBuilder: (Context, int index) {
              return GestureDetector(
                child: Container(
                  alignment: Alignment.topCenter, //동물들 가운데위로 배치
                  height: 300,
                  decoration: BoxDecoration(
                    //처음 그라데이션으로 확인하려고 했던 위젯..그냥써버림
                    color: Colors.green,
                  ),
                  child: Text(animalList[index]), //동물순서대로
                ),
              );
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            scrollController.jumpTo(0); //9일차 퇴근문제에 나왔던 jumpTo 리스트 최상단으로
          },
          child: Icon(Icons.vertical_align_top),
        ),
      ),
    );
  }
}
아래는 두번째페이지
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: secondPage(),
    );
  }
}

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

  @override
  State<secondPage> createState() => _secondPageState();
}

class _secondPageState extends State<secondPage> {
  var myController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('2번 문제'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextField(
            controller: myController,
            onChanged: (value) {
              setState(() {});
            },
          ),
          Text(
            myController.text,
            style: TextStyle(color: Colors.black),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (() {
          setState(() {
            myController.clear();
          });
        }),
        child: Icon(Icons.close),
      ),
    );
  }
}

Android Emulator - Pixel_XL_API_27_5554 2023-02-07 02-05-15.mp4
7.33MB