Flutter 어플 개발 main.dart 구현

 

Flutter란? 1. 하나의 코드베이스로 모바일, 웹, 데스크톱에서 네이티브로 컴파일 되는 구글의 아름다운 UI 툴킷입니다. 2. 빠른 개발, 표현력 있고 유연한 UI, 네이티브 수준의 성능등의 특징이 있습니다. 3. 안드로이드와 IOS 동시에 개발된다는 특징과 함께 dart언어 기반의 언어입니다.

 

 

Flutter 개발의 목적

1. 프로젝트를 진행함으로 dart언어의 이해도를 높힌다

2. firebase을 통해 사용자 인증과 데이터 관리를 통해 flutter의 이해도를 높힌다.

3. 실제로 사용가능한 어플을 만듬으로서 모바일 앱에 대한 이해도를 높힌다.

 

 

현재까지 진행된 코드

 

main.dart

import 'package:firebase_auth/firebase_auth.dart'; import 'package:flutter/material.dart'; import 'package:graduationproject/data/JoinOrLogin.dart'; import 'package:graduationproject/login.dart'; import 'package:graduationproject/Sign_up.dart'; import 'package:provider/provider.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {   // This widget is the root of your application.   @override   Widget build(BuildContext context) {     return MaterialApp(       debugShowCheckedModeBanner: false, //우측 상단 debug 제거       title: 'Flutter Demo',       theme: ThemeData(         primaryColor: Colors.black,       ),       //provider Join       home: MyHomePage(),       //라우터로 인한 화면 이동       routes: {         '/login' : (context) => login(), //로그인 라우더         '/Sign_up' : (context) => Sign_up() //회원가입 라우터       },     );   } }

main.dart의 stateless형 함수 위젯이다. 전체적으로 변화가 없는 가장 큰 틀을 담당하며 routes을 이용해 회원가입 창과 로그인 창으로 갈 수 있도록 구현했다.

 

main.dart

class MyHomePage extends StatefulWidget {   // This widget is the home page of your application. It is stateful, meaning   // that it has a State object (defined below) that contains fields that affect   // how it looks.   // This class is the configuration for the state. It holds the values (in this   // case the title) provided by the parent (in this case the App widget) and   // used by the build method of the State. Fields in a Widget subclass are   // always marked "final".   @override   _MyHomePageState createState() => _MyHomePageState(); }

Stateful 위젯을 생성하기 위해 필수적으로 있어야 하는 함수이다. 바로 _MyHomePtageState() 함수로 이동한다.

 

main.dart

class _MyHomePageState extends State {   @override   Widget build(BuildContext context) {     // This method is rerun every time setState is called, for instance as done     // by the _incrementCounter method above.     //     // The Flutter framework has been optimized to make rerunning build methods     // fast, so that you can just rebuild anything that needs updating rather     // than having to individually change instances of widgets.     return Scaffold(       appBar: PreferredSize(         preferredSize: Size.fromHeight(70.0),         child: AppBar(           // Here we take the value from the MyHomePage object that was created by           // the App.build method, and use it to set our appbar title.           title: Column(             mainAxisAlignment: MainAxisAlignment.center,             crossAxisAlignment: CrossAxisAlignment.center,             children: [               Center(                 child: Text(                   'C-STYLE',                   style: TextStyle(                       height: 1.5,                       fontWeight: FontWeight.bold,                       fontSize: 35,                       fontFamily: 'Nanum Barumpen',                       //나눔 글꼴                       fontStyle: FontStyle.normal),                 ),               ),             ],           ),           actions: [             Column(               mainAxisAlignment: MainAxisAlignment.center,               crossAxisAlignment: CrossAxisAlignment.center,               children: [                 IconButton(                   icon: Icon(                     Icons.camera_alt,                     color: Colors.white,                     size: 40,                   ),                 ),               ],             )           ],         ),       ),

처음 화면에 앱바를 설정해 준다.  appbar의 여러가지 속성을 사용했다. 우측 상단에 카메라 아이콘을 추가했다.

 

main.dart

drawer: Drawer(         child: ListView(           padding: EdgeInsets.zero,           children: [             //로그인 회원가입 창             DrawerHeader(               child: Column(                 mainAxisAlignment: MainAxisAlignment.start,                 children: [                   FlatButton(                     child: Text(                       '로그인',                       style: TextStyle(                         height: 1.5,                         fontWeight: FontWeight.bold,                         fontSize: 35,                         fontFamily: 'Nanum Myeongjo',                         fontStyle: FontStyle.normal,                         color: Colors.white,                       ),                     ),                     onPressed: () async{                       final result = await Navigator.pushNamed(context, '/login');                     },                   ),                   //로그인과 회원가입 사이의 여백                   SizedBox(                     height: 10,                   ),                   FlatButton(                     child: Text(                       '회원 가입',                       style: TextStyle(                         height: 1.5,                         fontWeight: FontWeight.bold,                         fontSize: 35,                         fontFamily: 'Nanum Myeongjo',                         fontStyle: FontStyle.normal,                         color: Colors.white,                       ),                     ),                     onPressed: () async{                       final result = await Navigator.pushNamed(context, '/Sign_up');                     },                   ),                 ],               ),               decoration: BoxDecoration(                 color: Colors.black,               ),             ),             ListTile(                 title: Text('중고 옷 올리기'),                 onTap: () {                   Navigator.pop(context);                 }),             ListTile(               title: Text('TOP'),               onTap: () {                 Navigator.pop(context);               },             ),             ListTile(               title: Text('OUTER'),               onTap: () {                 Navigator.pop(context);               },             ),             ListTile(               title: Text('PAINTS'),               onTap: () {                 Navigator.pop(context);               },             ),             ListTile(               title: Text('SHOES'),               onTap: () {                 Navigator.pop(context);               },             ),             ListTile(               title: Text('ACCESSORY'),               onTap: () {                 Navigator.pop(context);               },             ),           ],         ),       ),       // This trailing comma makes auto-formatting nicer for build methods.     );   } }

다음은 슬라이드 메뉴이다. 아이콘을 클릭하면 옆에 슬라이드가 나오며 구현한 데이터가 나온다. 슬라이드 메뉴에 로그인과 회원가입을 넣어 Navigato을 사용해서 로그인 페이지와 회원가입 페이지로 이동하도록 구현하였다.   나머지는 나중에 구현할 페이지를 미리 구현해놓았다.

 

 

 

구현된 화면