요즘들어 플러터를 하는데 너무 재미가 있다.
여기서 플러터가 무엇이냐!?
홈페이지 설명글을 보면 "가장 빠른 아름다운 네이티브 앱" 이라과 적혀있다.
플러터를 시작하기 전에는 React Native에 더 관심이 있었지만 막상 시작하고 나니 React보다 쉽고 Flutter에서 사용하는 Dart라는 언어가 자바와 많이 비슷해서 이질감이 없었다는것! 그리고 구현하기 어려울것 같은 효과들을 아주 쉽게 구현할 수 있어 편리했다.
오늘은 Flutter 앱에 로딩 또는 시작화면을 구현하는 코드를 기록하려고 한다.
main.dart
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Splash',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SplashScreen();
}
}기본적인 flutter을 알고 있다면 HomePage에서 SplashScreen 을 부르고 있다는것을 알고 있을 것이다.
다만 여기서 primarySwatch와 visualDensity를 짚고 넘어가자면
primarySwatch 속성은 테마 속성을 지정한다.
primaryColor이라는 속성도 존재하는데 이 속성과 다른점은 primarySwatch는 MaterialColor를 지정해 줘야한다.
예를 들어
primarySwatch: Colors.white를 사용하면 오류가 난다. 왜냐하면 Colors.white는 MaterialColor 타입의 하위타입이 아니기 때문이다.
조금더 찾아보니 primaryColor 보다는 primarySwatch를 사용하는게 더 괜찮다고 하는데 머터리얼 컴포넌트들이 primaryColor와는 다른 색조를 사용 할수 있어 primarySwatch를 사용하는게 안전하다나 뭐라나...
visualDensity는 사용자 인터페이스 구성요소의 시각적 밀도를 담당한다는데 자세히는 모르겠지만 아마 각각 아이템의 밀도에 관한 속성인가보다.
adaptivePlatformDensity 속성은 "defaultTargetPlatform을 기반으로 적응형 시각적 밀도를 반환합니다." 라고 적혀있는데 아마 기본형인것 같다.
위 두개의 속성은 플러터 프로젝트를 생성했을때 main.dart에 자동으로 생성되는 속성이라 어떤 일을 하는 속성인지만 알아두고 넘어가도 될것 같다.
그리고 SplashScreen을 보겠다.
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
super.initState();
Timer(
Duration(seconds: 4),
() => Navigator.push(
context,
MaterialPageRoute(builder: (context) => Login()),
),
);
}
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/splash.gif'), fit: BoxFit.contain),
),
child: Stack(
children: <Widget>[
Positioned(
top: 0.0,
left: 0.0,
child: Container(
width: width,
height: height,
child: Scaffold(
backgroundColor: Colors.transparent,
body: Padding(
padding: EdgeInsets.all(8.0),
child: Center(),
),
),
),
),
],
),
);
}
}
윗 부분에서 StatefulWidget의 생명주기 함수 initState()를 오버라이드(재정의) 했다. 4초 이후에 Login 페이지로 넘겨주는데
assets 폴더에 있는 splash.git를 4초 동안 보여준다.
이렇게 자신이 원하는 첫 로딩 화면을 구현하면 되겠다.
