Flutter_07. ScaffoldMessenger, SnackBar, Function

화면 하단에 앱 프로세스에 대한 간략한 메시지를 제공하는 SnackBar를 메모해보겠다.

자세한 내용은 아래 링크에서 확인!

 

https://docs.flutter.dev/cookbook/design/snackbars

Display a snackbar

 

https://m2.material.io/components/snackbars#anatomy

Material Design

 

반응형

 

 

 

 

ElevatedButton

 

 

1) Flutter_06 코드 열고 확인

2023.05.02 - [개발하기] - Flutter_06. GestureDetector, onTap, AlertDialog

 

2) Title 변경

 

3) GestureDetector를 Column으로 랩핑한뒤, 위에는 Text 아래에는 SizeBox 추가

 

 

4) ElevatedButton 2개 추가

  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Padding(
          padding: EdgeInsets.all(8.0),
          child: Text('AlertDialog Text'),
        ),
        GestureDetector(
          onTap: () => _showDialog(context),
          child: const Text('Tap Here'),
        ),
        const SizedBox(
          height: 20,
        ),
        ElevatedButton(
          onPressed: () {
            // --- Click Event : SnackBar Case1. Basic Create

          },
          style: ElevatedButton.styleFrom(
              backgroundColor: Colors.red,
              minimumSize: const Size(200, 40),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20)
              ),
          ),
          child: const Text('Snackbar Button'),
        ),
        ElevatedButton(
          onPressed: () {
            // --- Click Event : SnackBar Case2. Create with Function

          },
          child: const Text('Snackbar Button Function'),
        ),

      ],
    ),
  ),

 

 

5) Command + S 또는 ⚡️ 아이콘 버튼 클릭하여 화면 확인

 

 

 

 

 

 

 

---

SnackBar, ScaffoldMessenger, Function

 

 

 

1) 첫번째 ElevatedButton : onPress에 SnackBar 코드 추가

onPressed: () {

    // --- Click Event : SnackBar Case1. Basic Create

    String message = 'ElevatedButton is clicked';

 

    // ----Messenger위에 SnackBar띄우기

    ScaffoldMessenger.of(context).showSnackBar(

        SnackBar(

            content: Text(

                message

            ),

            duration: const Duration(

                seconds: 1,

            ),

            backgroundColor: Colors.red,

        ),

    );

},

 

 

2) Command + S 또는 ⚡️ 아이콘 버튼 클릭하여 저장, 버튼 클릭하여 SnackBar 메시지 확인

 

 

 

 

3) 두번째 ElevatedButton : onPress에 함수명 추가

 

 

 

4) SnackBarFunction 만들기

    // --- Func SnackBar

    snackBarFunction(BuildContext context){

        String message = 'Button Function is clicked';

        ScaffoldMessenger.of(context).showSnackBar(

            SnackBar(

                content: Text(

                    message

                ),

                duration: const Duration(

                    seconds: 1,

                ),

                backgroundColor: Colors.blue,

            ),

        );

    }

 

 

 

5) Command + S 또는 ⚡️ 아이콘 버튼 클릭하여 저장, 버튼 클릭하여 SnackBar 메시지 확인

 

 

 

 

 

---

 

SnackBar Function : Message, Color

 

 

1) 스낵바 Message와 Color를 같이 설정할 수 있도록 함수 정의

    // --- Function -----------

    snackBarFunction(BuildContext context, String message, Color colors) {

        ScaffoldMessenger.of(context).showSnackBar(

            SnackBar(

                content: Text(message),

                duration: const Duration(

                    seconds: 2,

                ),

                backgroundColor: colors

            ),

        );

    }

 

 

2) 함수 사용

- snackBarFunction(context, message, Colors.red);

  ElevatedButton(
    onPressed: (){
      String message = 'A is clicked';
      snackBarFunction(context, message, Colors.black);
    },
    child: const Text('Snackbar Button A'),
  ),
  ElevatedButton(
    onPressed: (){
      String message = 'B is clicked';
      snackBarFunction(context, message, const Color.fromARGB(255, 12, 27, 47));
    },
    child: const Text('Snackbar Button B'),
  ),

 

 

3) Command + S 또는 ⚡️ 아이콘 버튼 클릭하여 저장, 버튼 클릭하여 SnackBar 메시지 확인