[Flutter] 위젯 및 Route 및 단축키

터미널창에서 pub.dev 사이트에서 발견한 패키지를 다운로드 해서 사용하는방법

=> flutter pub add image_compare_slider

 

command+ . 누르면 소스코드 줄이기 (맥북)

 

안드로이드 스튜디오에서 => stless 입력시 stateless관련 자동생성  / stful 하면 반대로 자동생성

 

핫리로드 기능 => command+s 저장시 바로 된다.

 

안드로이드스튜디오 -> 인자값 확인 단축키 -> Command+P -> Ctrl+space자동완성기능으로정보 조회 

Scaffold()
//Material Design 스타일 앱을 개발할 때 기본적인 앱의 레이아웃구조를 만들고
//주요 기본 ui 요소를 제공하는 중요한 위젯

 

  // 위젯이란 ? 앱의 화면에서 그려지는 앱의 모든 구성요소를 나타내며,
  // 화면에 그려지는 모든 것을 위젯으로 표현할 수 있다.
  // 다양한 종료와 계층구으로 이루어져 있음

 

//StatelessWidget(상태가 없는 위젯) - 한번 생성되면 내부 데이터나 상태를 변경할 수 없고,UI를 그리기위한 정보만을 가진다.

//StatefullWidget - 상태를 가지는 위젯이, 사용자 상호작용 또는 다른 이벤트에 따라 상태를 변경할 수 있습니다.
//대체 왜 두가지의 상태가 존재하는 이유?
//앱의 퍼포먼스트를 높이기위해서 사용 데이터가 변하지 않는 경우 풀보다는 리스로 하는게 성능상에서는 유용하기때문에 
// 상황에 맞게 조절하여 사용하기위해서 사용한다.

 

20231125 배운 소스 부분

 

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MainScreen2(),
    );
  }
}

class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

  @override
  // 위젯이란 ? 앱의 화면에서 그려지는 앱의 모든 구성요소를 나타내며,
  // 화면에 그려지는 모든 것을 위젯으로 표현할 수 있다.
  // 다양한 종료와 계층구으로 이루어져 있음

  //StatelessWidget(상태가 없는 위젯) - 한번 생성되면 내부 데이터나 상태를 변경할 수 없고,UI를 그리기위한 정보만을 가진다.
  Widget build(BuildContext context) {
    //Material Design 스타일 앱을 개발할 때 기본적인 앱의 레이아웃구조를 만들고
    //주요 기본 ui 요소를 제공하는 중요한 위젯
    return Scaffold(appBar:AppBar(title: Text('나의 첫앱'),),body:Text('안녕하세요'));
  }
}

//StatefullWidget - 상태를 가지는 위젯이, 사용자 상호작용 또는 다른 이벤트에 따라 상태를 변경할 수 있습니다.
//대체 왜 두가지의 상태가 존재하는 이유?
//앱의 퍼포먼스트를 높이기위해서 사용 데이터가 변하지 않는 경우 풀보다는 리스로 하는게 성능상에서는 유용하기때문에
// 상황에 맞게 조절하여 사용하기위해서 사용한다.
class MainScreen2 extends StatefulWidget {
  const MainScreen2({super.key});

  @override
  State<MainScreen2> createState() => _MainScreen2State();
}

class _MainScreen2State extends State<MainScreen2> {
  String msg = "홍드로이드";
  @override
  void initState(){
    super.initState();
    Future.delayed(Duration(seconds: 3),(){
      setState(() {
        msg='홍길동';
      });

    },);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar:AppBar(title: Text('나의 첫앱'),),body:Text(msg));
  }
}

 

옵션 +엔터 누르면 임포트

///자동정렬 단축키 윈도우 : ctrl +alt + L /  맥 : cmd + options + l

 

메인화면 구성코드 ( 화면이동 Route 관련되부분 한부분)

import 'package:first_project/screen/main_screen.dart';
import 'package:first_project/screen/splash_screen.dart';
import 'package:flutter/material.dart';


void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      initialRoute: '/',
      routes: {
        '/':(context)=> SplashScreen(),
        '/main':(context)=> MainScreen(),
      },
    );
  }
}

 

메인화면 소스

import 'package:flutter/material.dart';

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('메인화면입니다.'),
      ),
    );
  }
}

 

스플래쉬화면코드

import 'package:flutter/material.dart';

class SplashScreen extends StatelessWidget {
  const SplashScreen({super.key});

  @override
  Widget build(BuildContext context) {
    Future.delayed(Duration(seconds: 2),(){
      //화면이동 -> splashsceen 에서 메인화면으로 이동하는 부분
      Navigator.pushNamed(context, '/main');
    },);

    ///자동정렬 단축키 윈도우 : ctrl +alt + L /  맥 : cmd + options + l
    return Scaffold(
      body: Center(
        child: Text('시작화면입니다.'),
      ),
    );
  }
}