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

Flutter SnackBar 표현하기

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

Flutter를 배워가면서 언어구나 하는 생각이 듭니다. 다른 분야 기술자로 살다가 App을 만드는 것을 공부해보니 어찌나 어려운지 모르겠군요. 자꾸 보다 보면 익숙해지긴 하겠지만 새로운 것이 아닌 있는 것을 보고 따라 하는 것도 전반적인 언어의 이해가 없고서는 힘들다는 것을 알겠군요

 

Now Version과 Past Version의 차이

deprecated 된 즉, 사용도가 많이 떨어져서 사라진 명령어들이 문제입니다. 명령어가 살았었을 때는 사용하여 App을 만들면 되지만 지금은 그 명령어가 없어졌다는 것이 가장 큰 애로사항입니다. 기존 동영상 강의를 따라가려 해 봐도 도통 힘든 것이 아니군요. 그래도 자꾸 해봐야겠지요.

지금 배우는 단계에서 없어져서 곤란한 명령어가 뭐냐면요.

FlatButton 이라던지, RaiseButton 이란 것들이 각각 TestButton으로, ElevatedButton으로 바뀌었군요.

물론 사용하는 방법도 살짝 바뀌니 곤란하군요.

개발 언어는 살아있다는 것을 다시 한번 느끼는 바입니다.

 

Code

import 'package:flutter/material.dart';

void main() => runApp(const SnackBarDemo());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SnackBar',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('SnackBar'),
        ),
        body: const SnackBarPage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          final snackBar = SnackBar(
            content: const Text('A SnackBar!',
            textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white
              ),
            ),
            backgroundColor: Colors.teal,
            duration: Duration(milliseconds: 500),
          );
          ScaffoldMessenger.of(context).showSnackBar(snackBar);
        },
        child: const Text('Show me'),
        ),
      );
  }
}

결과물

SnackBar 결과물

그림과 같이 Show me를 누르면 아래 'A SnackBar!'가 표시되는 Code입니다. 

반응형

댓글