728x90
GitHub - bulmang/errormessage
Contribute to bulmang/errormessage development by creating an account on GitHub.
github.com
앱 설명
- 오류 메세지 출력 에니메이션 SnackBar
앱 기능
- awesome_snackbar_content 0.1.0 APi 사용
- 버튼을 눌렀을 때 상단, 하단에서 Custom된 메세지 출력
- X버튼을 누르면 사라지거나 슬라이드 하여 사라짐
문법정리
- const : const로 지정해두면 앱을 실행할 때 한번만 생성하여 리소스 낭비 방지
- debugShowCheckedModeBanner : 디버그배너 표시
- clipBehavior : 이미지 클립 지정
- BoxDecoration : 말 그대로 UI 꾸미기
- SizedBox : 위젯은 width와 height 둘 중 하나라도 설정하지 않으면, 크기는 child의 크기에 알맞게 설정
- ScaffoldMessenger :
- 구조 모든 부분에서 스낵바를 다룰 수 있음
- Scaffold 에 의해 스낵바가 관리되는 것이 아닌 최상위의 ScaffoldMessenger에 의해서 관리가 된다는 의미
- clipBehavior : 이미지 클립 지정
- BoxDecoration : 말 그대로 UI 꾸미기
- Expanded : 자식(Child)이 사용 가능한 공간을 채우도록 행(Row), 열(Column) 또는 유연한영역(Flex)의 자식을 확장하는 위젯
- Positioned : 자유롭게 위젯 지정
- Stack :
- 가장 큰 child의 사이즈를 따라감.
- 이미지 위에 텍스트를 겹치게 하거나 할 때 Stack을 사용한다.
- SnackBarBehavior : SnackBar관련 함수
- const : const로 지정해두면 앱을 실행할 때 한번만 생성하여 리소스 낭비 방지
- debugShowCheckedModeBanner : 디버그배너 표시
- clipBehavior : 이미지 클립 지정
- BoxDecoration : 말 그대로 UI 꾸미기
- SizedBox : 위젯은 width와 height 둘 중 하나라도 설정하지 않으면, 크기는 child의 크기에 알맞게 설정
- ScaffoldMessenger :
- 구조 모든 부분에서 스낵바를 다룰 수 있음
- Scaffold 에 의해 스낵바가 관리되는 것이 아닌 최상위의 ScaffoldMessenger에 의해서 관리가 된다는 의미
- clipBehavior : 이미지 클립 지정
- BoxDecoration : 말 그대로 UI 꾸미기
- Expanded : 자식(Child)이 사용 가능한 공간을 채우도록 행(Row), 열(Column) 또는 유연한영역(Flex)의 자식을 확장하는 위젯
- Positioned : 자유롭게 위젯 지정
- Stack :
- 가장 큰 child의 사이즈를 따라감.
- 이미지 위에 텍스트를 겹치게 하거나 할 때 Stack을 사용한다.
- SnackBarBehavior : SnackBar관련 함수
- const : const로 지정해두면 앱을 실행할 때 한번만 생성하여 리소스 낭비 방지
- debugShowCheckedModeBanner : 디버그배너 표시
- clipBehavior : 이미지 클립 지정
- BoxDecoration : 말 그대로 UI 꾸미기
- SizedBox : 위젯은 width와 height 둘 중 하나라도 설정하지 않으면, 크기는 child의 크기에 알맞게 설정
- ScaffoldMessenger :
- 구조 모든 부분에서 스낵바를 다룰 수 있음
- Scaffold 에 의해 스낵바가 관리되는 것이 아닌 최상위의 ScaffoldMessenger에 의해서 관리가 된다는 의미
- clipBehavior : 이미지 클립 지정
- BoxDecoration : 말 그대로 UI 꾸미기
- Expanded : 자식(Child)이 사용 가능한 공간을 채우도록 행(Row), 열(Column) 또는 유연한영역(Flex)의 자식을 확장하는 위젯
- Positioned : 자유롭게 위젯 지정
- Stack :
- 가장 큰 child의 사이즈를 따라감.
- 이미지 위에 텍스트를 겹치게 하거나 할 때 Stack을 사용한다.
- SnackBarBehavior : SnackBar관련 함수
코드
- main.dart
import 'package:flutter/material.dart'; import 'snackbar.dart'; import 'flash_message_screen.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'The Flutter Way', theme: ThemeData( brightness: Brightness.dark, elevatedButtonTheme: ElevatedButtonThemeData( style: ElevatedButton.styleFrom( padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 12), primary: const Color(0xFF0070E0), ), ), scaffoldBackgroundColor: const Color(0xFF262434), ), home: const FlashMessageScreen(), ); } }- flash_message_screen.dart
import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; class FlashMessageScreen extends StatelessWidget { const FlashMessageScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: ElevatedButton( onPressed: () { ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Stack( clipBehavior: Clip.none, children: [ Container( padding: const EdgeInsets.all(16), height: 90, decoration: const BoxDecoration( color: Color(0xFFC72C41), borderRadius: BorderRadius.all(Radius.circular(20)), ), child: Row( children: [ const SizedBox(width: 48), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: const [ Text( '문제가 생겼어요!', style: TextStyle( color: Colors.white, fontSize: 20, ), ), const Spacer(), Text('피플 서버에 오류가 생긴 것 같습니다.', style: TextStyle( color: Colors.white, fontSize: 15, ), maxLines: 2, overflow: TextOverflow.ellipsis, ), ], ), ), ], ), ), Positioned( bottom: 0, child: ClipRRect( borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20), ), child: SvgPicture.asset( "assets/icons/bubbles.svg", height: 48, width: 40, color: const Color(0xFF801336), ), ), ), Positioned( top: -20, left: 0, child: Stack( alignment: Alignment.center, children: [ SvgPicture.asset( "assets/icons/fail.svg", height: 40, ), Positioned( top: 10, child: SvgPicture.asset("assets/icons/close.svg",height: 17,)) ], ), ) ], ), behavior: SnackBarBehavior.floating, backgroundColor: Colors.transparent, elevation: 0, ), ); }, child: const Text("버튼을 누르면 메시지가 나옵니다."), )), ); } } - snackbar.dart
import 'package:flutter/material.dart';
import 'package:awesome_snackbar_content/awesome_snackbar_content.dart';
class AweseomSnackBarExample extends StatelessWidget {
const AweseomSnackBarExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ElevatedButton(
child: const Text('하단 메세지 출력'),
onPressed: () {
final snackBar = SnackBar(
/// need to set following properties for best effect of awesome_snackbar_content
elevation: 0,
behavior: SnackBarBehavior.floating,
backgroundColor: Colors.transparent,
content: AwesomeSnackbarContent(
title: '오류 발생!',
message:
'현재 피플 서버에 문제가 생겼습니다. 다시 접속해주세요',
/// change contentType to ContentType.success, ContentType.warning or ContentType.help for variants
contentType: ContentType.failure,
),
);
ScaffoldMessenger.of(context)
..hideCurrentSnackBar()
..showSnackBar(snackBar);
},
),
const SizedBox(height: 10),
ElevatedButton(
child: const Text('상단 메세지 출력'),
onPressed: () {
final materialBanner = MaterialBanner(
/// need to set following properties for best effect of awesome_snackbar_content
elevation: 0,
backgroundColor: Colors.transparent,
forceActionsBelow: true,
content: AwesomeSnackbarContent(
title: '사연공유로 100 포인트가 적립되었어요!',
message:
'공유로 더 많은 사람들이 보고, 사연요청자가 도움을 받으면 100 포인트를 추가로 받아요! ',
/// change contentType to ContentType.success, ContentType.warning or ContentType.help for variants
contentType: ContentType.success,
// to configure for material banner
inMaterialBanner: true,
),
actions: const [SizedBox.shrink()],
);
ScaffoldMessenger.of(context)
..hideCurrentMaterialBanner()
..showMaterialBanner(materialBanner);
},
),
],
),
),
);
}
}
728x90
'Flutter' 카테고리의 다른 글
| [피플] - 이슈 수정 (git, 협업능력) (0) | 2023.02.03 |
|---|---|
| [Flutter 문법]StatefulWidget parameter 넘겨주기 (0) | 2023.01.20 |
| Dart 문법 정리 (0) | 2023.01.04 |
| 인스타그램 클론코딩 (0) | 2023.01.03 |
| Flutter 개발 공부 정리 (0) | 2023.01.02 |