2월 1일 -Flutter,Flash app ,Class, navigation button, Heroaction

 

static const String id = "welcome_screen" ;

static : dart 의  있는 keywords  

https://dart.dev/guides/language/language-tourd

A tour of the Dart language

 static 을 붙임으로,  클라스를 호출하지 않고 바로 인스턴스를 확인 할수 있다.

void main()
{
  print(Dog().numof);
  print(Car.numof);
}
class Dog{
  int numof =4 ;
}
class Car {
  static int numof =2;

}

static 을 붙임으로, Class 안의 함수를 바로 사용 할 수있다

 

void main()
{

  Circle.checkOut(radius : 12.2);
}

class Circle
{
  static const double pi = 3.14 ;

  static void checkOut({required double radius})
  {
    double output = 2 * pi*radius;
    print(output);
  }

}

const : const 선언하여 타입을 잘못 치는것을 방지하여 개발시 실수를 잡을 수가 있다 !!  

 

 

 

Class 와 const id 를 이용한 버튼 액션 코드

1. 버튼을 만드는 화면 

import 'login_screen.dart';

/// 생략

body:
SizedBox(
           height: 48.0,
         ),

Padding(
              padding: EdgeInsets.symmetric(vertical: 16.0),
              child: Material(
                elevation: 5.0,
                color: Colors.lightBlueAccent,
                borderRadius: BorderRadius.circular(30.0),
                child: MaterialButton(
                  onPressed: () {
                    //Go to login screen.
                    Navigator.pushNamed(context,LoginScreen.id);
                  },

                  minWidth: 200.0,
                  height: 42.0,
                  child: Text(
                    'Log In',
                  ),
                ),
              ),
            ),

 

2. 이동할 화면의 클라스

class LoginScreen extends StatefulWidget {
  static const String id = "login_screen" ;

  @override
  _LoginScreenState createState() => _LoginScreenState();
}

 

정리 루트:

void main() => runApp(FlashChat());
class FlashChat extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        textTheme: TextTheme(
          bodyText1: TextStyle(color: Colors.black54),
        ),
      ),
      //home: WelcomeScreen(),
      initialRoute: WelcomeScreen.id,
      // routes to run an app
      routes:{
        WelcomeScreen.id:(context) => WelcomeScreen(),
        LoginScreen.id :(context) => LoginScreen(),
        RegistrationScreen.id :(context) => RegistrationScreen(),
        ChatScreen.id :(context) => ChatScreen(),

      },
    );
  }
}

'/'  를 이용한 경로를 설정하는 방법에서는 무조건  '/' 하나만 있는 경로를 포함 해야한다.

 

initialRoute: '/A',
// routes to run an app
routes:{
  '/A':(context) => WelcomeScreen(),
  '/B' :(context) => LoginScreen(),
  },

위와 같이 '/~'으로 모두 채우면 깨진다.

 

 

extends :  class 상속 받는것

void main()
{
  Fish().move();
  Dog().move();
}

class Animal{
  void move()
  {
    print('Change_position');
  }

}

class Fish extends Animal{
}

class Dog extends Animal{
}

 

Change_position 가 두번 찍힌다.

override 로 move 를 변환하면, main은 동일

void main()
{
  Fish().move();
  Dog().move();
}

class Fish extends Animal{
  @override
  void move()
  {
    super.move();
    print('by swimming');
  }

}

class Dog extends Animal{
  void move()
  {
    super.move(); // 상속 받는 동물 클라스의 move 를 출력할게!
    
    print('by Run');
  }
}

 

output: 

Change position

by swimming

Change position

by Run

------------------

https://paulaner80.tistory.com/entry/Dart-mixin-%EC%9D%B4%EB%9E%80-1

Dart mixin 이란?

상속 extends 은 기본으로 하나의 클라스 만 받는다, 물고기와 강아지 둘다 받으면 move() 를 사용할때 뭐가 나와야 하는지 햇갈린다.

이것을 mixin 으로 해결한다.

 

void main()
{
  Duck().move();
  Duck().swim();
  Duck().fly();
}
class Animal{
  void move()
  {
    print('Change position');
  }
}
mixin CanSwim{
  void swim()
  {
    print("Chaninging potion by swim");
  }
}
mixin CanFly{
  void fly()
  {print("Chaninging potion by Fly");}
}
class Duck extends Animal with CanSwim,CanFly{
}

 

결과 :

Change position

Chaninging potion by swim

Chaninging potion by Fly

 

 

 

 

 

 

 

 

 

 

 

-----------------UI------------------

 

Hero animation: 화면 전환시 로고나 이미지가 넘어가는것을 자연스럽게 보이기 위하여 첨가한다.

 

사용법 : image 를 Hero 위젯으로 감싼다!       -> !!    화면간 공유하는 로고 모두!!

tag :'logo'  , 추가!

 

다음 과 같은 컨테이너를 선택(drag) -> action context -> wrap with widget

 

Container(
  child: Image.asset('images/logo.png'),
  height: 60.0,
),

"hero 추가 후"

Row(
  children: [
    Hero(
      tag: 'logo',
      child: Container(
        child: Image.asset('images/logo.png'),
        height: 60.0,
      ), // 컨테이너
    ), // Hero widget
    Text(
      'Flash Chat',
      style: TextStyle(
        fontSize: 45.0,
        fontWeight: FontWeight.w900,
      ),
    ),
  ],
),

tip :   위젯을 추가할때  최하단의 칸을 ),),] 와 같은 괄호들을 띄워 놓고 추가를 하면

뜨워 놓은 칸에 위젯 추가시 붙는 괄호 들을 확인 할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

--------------------------------------------------------------------------------

그외 한것들

cf.  터미널 flutter 경로 및 버전 확인 방법

$flutter doctor 

--------------------------------------------------------------------------------

1. notion   todo list page download 하고 공유, app 공유 페이지  제작

2. Docker: 서비스가 커져 서버를 확자하거나 옮길때 생길 수있는 문제들이 있는데 도커를 이용하면,

서비스의 유지 보수가 쉬워진다.  도커는 컨테이너를 관리 하는 구조이므로 작은 가상화 컴퓨터를 사용 하는 것이라고 볼 수 있다 .