반응형
어떤 공부 든 한번 해봐서는 절대로 안 되는 것이 언어인듯합니다. 꾸준히 봐야 하고 들어야 하고 해봐야 하는 것이 언어인듯합니다. 지금 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('취소'),
),
],
),
);
}
),
),
);
}
}
결과물
대략 5 Page를 표시하기 위한 Coding이었습니다. 솔직히 반에 반 이해될라나요? 아~ 앱 개발은 정녕 쉬운 것은 아니군요. 하다 보면 원수가 나겠죠.
반응형
댓글