flutter 4일차 snackbar + 페이지 이동

오늘은 클릭하면 밑에 글자가 올라오는거랑 페이지 이동을 알아보겠습니다.

이런식으로 밑에서 hi 라고 올라오는게 snackbar라고 합니다.

 

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'hi',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      debugShowCheckedModeBanner: true,
      home: MyHome(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            UserAccountsDrawerHeader(
              accountName: Text('hellow'),
              accountEmail: Icon(Icons.send),
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/img.jpg'),
              ),
              onDetailsPressed: () {
                print('detail');
              },
              decoration: BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.only(
                  bottomRight: Radius.circular(30),
                  bottomLeft: Radius.circular(30),
                ),
                boxShadow: [
                  BoxShadow(
                    color: Colors.red.withOpacity(0.5),
                    spreadRadius: 5,
                    blurRadius: 7,
                    offset: Offset(0, 5),
                  )
                ],
              ),
            ),
            ListTile(
              leading: Icon(
                Icons.send,
                color: Colors.red,
              ),
              title: Text('리스트'),
              onTap: () {
                print('리스트');
              },
              trailing: IconButton(
                icon: Icon(Icons.add),
                onPressed: () {
                  print('add');
                },
              ),
            ),
          ],
        ),
      ),
      appBar: AppBar(
        title: Text('hellow'),
      ),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text('hi'),
                  duration: Duration(seconds: 5),
                ),
              );
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => second(),
                ),
              );
            },
            child: Text(
              'elevated',
              style: TextStyle(color: Colors.black),
            ),
            style: ElevatedButton.styleFrom(
              primary: Colors.yellow,
              textStyle: TextStyle(
                backgroundColor: Colors.blue,
                fontSize: 20.0,
              ),
            ),
          ),
          TextButton(onPressed: () {}, child: Text('TextButton')),
          OutlinedButton(onPressed: () {}, child: Text('OutlinedButton'))
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('second'),
      ),
      body: Column(
        children: [
          Text('hi'),
        ],
      ),
    );
  }
}

우선 전체 코드를 보여드렸고 먼저 이동할 페이지인 second를 복사 붙여넣기 해주세요.

어제 코드를 그대로 이어 가겠습니다. 

저번에 만들었던 elevatedbutton에서 onpressesd에 스낵바와 페이지 이동을 넣어서  구현해보겠습니다.

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('hi'),
    duration: Duration(seconds: 5),
  ),
);

이런식을 content에 보여줄 내용을 적으면 되고 duration은 얼마나 지속할지 작성하는것입니다. 저는 5초로 작성했습니다.

이런식으로 5초동안 유지됩니다.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => second(),
  ),
);

이렇게  builder (context)=>이동할페이지 return을 하게 되면 그페이지로 이동이 됩니다.

이렇게 이동이 되고 스낵바도 여전히 유지 됩니다. 여기서 context가 뭔지 궁금할수 있는데 창한개의 정보를 담고있는 것이라고 생각하면 됩니다. 스낵바나 페이지 이동할때 이페이지를 이용하여 어떤페이지에 뛰워줄지 정하게 됩니다.

현재 페이지 이동에서는  화살표를 누르면 원래페이지로 돌아오는데 이것을 위해서도 사용되고 있습니다.

스낵바일 경우 context가 다른곳으로 이동하면 원래 사라지는데 여기서는  새로생긴 Scaffoldmessenger를 사용하기 있기 때문에 여전히 유지 되고 있는것입니다. 즉 새로운 Scaffoldmessenger가 생기기전까지는 scaffold 어디에서든 이스낵바가 나오게 됩니다. 그럼 한번 페이지 이동시 사라지게 해보겠습니다.

 

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

  @override
  Widget build(BuildContext context) {
    return ScaffoldMessenger(
      child: Scaffold(
        appBar: AppBar(
          title: Text('second'),
        ),
        body: Column(
          children: [
            Text('hi'),
          ],
        ),
      ),
    );
  }
}

second를 이런식으로 수정해서 scaffoldmessenger안에 넣어주시고 실행해보면

이렇게 다음 페이지에서는 안보이게 됩니다.

하지만 위에 화살표를 눌러서 빠르게 돌아오면

이런식으로 원래 scaffoldmessenger로 돌아왔기때문에 스낵바가 보이게 됩니다.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'hi',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      debugShowCheckedModeBanner: true,
      home: MyHome(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            UserAccountsDrawerHeader(
              accountName: Text('hellow'),
              accountEmail: Icon(Icons.send),
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/img.jpg'),
              ),
              onDetailsPressed: () {
                print('detail');
              },
              decoration: BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.only(
                  bottomRight: Radius.circular(30),
                  bottomLeft: Radius.circular(30),
                ),
                boxShadow: [
                  BoxShadow(
                    color: Colors.red.withOpacity(0.5),
                    spreadRadius: 5,
                    blurRadius: 7,
                    offset: Offset(0, 5),
                  )
                ],
              ),
            ),
            ListTile(
              leading: Icon(
                Icons.send,
                color: Colors.red,
              ),
              title: Text('리스트'),
              onTap: () {
                print('리스트');
              },
              trailing: IconButton(
                icon: Icon(Icons.add),
                onPressed: () {
                  print('add');
                },
              ),
            ),
          ],
        ),
      ),
      appBar: AppBar(
        title: Text('hellow'),
      ),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text('hi'),
                  duration: Duration(seconds: 5),
                ),
              );
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => second(),
                ),
              );
            },
            child: Text(
              'elevated',
              style: TextStyle(color: Colors.black),
            ),
            style: ElevatedButton.styleFrom(
              primary: Colors.yellow,
              textStyle: TextStyle(
                backgroundColor: Colors.blue,
                fontSize: 20.0,
              ),
            ),
          ),
          TextButton(onPressed: () {}, child: Text('TextButton')),
          OutlinedButton(onPressed: () {}, child: Text('OutlinedButton'))
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ScaffoldMessenger(
      child: Scaffold(
        appBar: AppBar(
          title: Text('second'),
        ),
        body: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => third(),
                  ),
                );
              },
              child: Text('jo'),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('third'),
      ),
      body: Column(
        children: [
          Text('hi'),
        ],
      ),
    );
  }
}

그리고 추가적으로 이렇게 작성 해서 해보면 

이렇게 세번째 페이지에 스낵바가 뜨게 됩니다. 그이유는 아까 말했듯이 두번째에는 scaffoldmessenger로 쌓여있어서 

안보였지만 세번재는 그냥 scaffold 이므로 기존에 있는 것으로 돌아왔기 때문에 다시 보이게 되는것입니다.

 

오늘은 여기까지 해보겠습니다.다들 고생 많으셨습니다.​