본문 바로가기
카테고리 없음

Flutter 화면이동 Coding 3

by 세상을 찾는 사람 2022. 9. 27.
반응형

어떤 공부 든 한번 해봐서는 절대로 안 되는 것이 언어인듯합니다. 꾸준히 봐야 하고 들어야 하고 해봐야 하는 것이 언어인듯합니다. 지금 Flutter를 직접 입력하고 있지만 도통 무슨 말이니 모르겠군요. 개발하는 사람들 참 대단하다는 생각이 이 순간 드는군요. 어쩜 그렇게 개발을 하는지

 

Coding

이번 Coding은 약간 깁니다. 하지만, 표현되는 것은 많지 않군요. 우리가 쉽게 사용하고 있는 앱 하나하나가 어떻게 만들어졌을까 하는 생각을 하게 되는군요. 타인이 만든 앱이 얼마나 소중한지. 그리고 앱 하나 만드는데 작은 돈이 드는 것은 절대 아니구나 하는 생각이 들더군요. 이렇게 쉽지 않을 것을 어찌했을까 다시 한번 존경의 박수를 보냅니다. 아래의 Coding 설명은 못 하겠습니다. 저 역시 많은 부분이 이해가 안 되기에 어떤 부분이 어떻게 사용되는지만 봐도 도움이 되겠죠?

결과물도 같이 봐주세요. 몇 페이지 안 되는 이렇게 Coding이 됐답니다.

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(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyPage(),
    );
  }
}

class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scaffold Messenger'),
      ),
      body: HomeBody(),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.thumb_up),
        onPressed: (){
          ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('Like a new Snack bar!'),
                duration: Duration(seconds: 5),
                action: SnackBarAction(
                  label: 'Undo',
                  onPressed: (){
                    Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context)=> ThirdPage()),
                    );
                  },
                ),
              ),
          );
        },
      ),
    );
  }
}

class HomeBody extends StatelessWidget {
  const HomeBody({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: Text('Go to the Second Page'),
        onPressed: (){
          Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage()),
          );
        },
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('"좋아요가 추가됐습니다."',
            style: TextStyle(
              fontSize: 20.0,
              color: Colors.redAccent
            ),),
          ],
        ),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ScaffoldMessenger(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Third Page'),
        ),
        body: Builder(
          builder: (context) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('"좋아요"를 취소하겠습니까?',
                    style: TextStyle(fontSize: 20.0, color: Colors.redAccent),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(
                          content: Text(
                            '"좋아요"가 취소됐습니다.',
                            style: TextStyle(
                                fontSize: 20.0, color: Colors.redAccent),
                          ),
                          duration: Duration(seconds: 3),
                        ),
                      );
                    },
                    child: Text('취소'),
                  ),
                ],
              ),
            );
          }
        ),
      ),
    );
  }
}

 

결과물

첫번째 Page, 하단 좋아요 Click, Click 후 SnackBar 표시
Undo Click시 표시, 취소 버튼 Click시 표시 SnackBar

대략 5 Page를 표시하기 위한 Coding이었습니다. 솔직히 반에 반 이해될라나요? 아~ 앱 개발은 정녕 쉬운 것은 아니군요. 하다 보면 원수가 나겠죠.

반응형

댓글