ALIOTHX Developers
ALIOTHXMANAGER
  • 😈DEMO App 설치
  • 크로스플랫폼 개발환경
    • ⚙️Flutter 개발환경
    • 🧑‍💻Flutter 시작하기
    • 📲폰에서 실행
    • 개발가이드
    • 🚀솔루션 설치
    • 🚦코드가이드
      • 명명 규칙및 주석처리
      • 코딩 컨벤션
      • 디렉토리 생성및 관리
      • 페이지 작성
    • 🏭Flutter 아키텍쳐
      • 채널링
      • 웹뷰
        • 웹뷰 설정
        • 웹뷰 연동
      • 보안 (Security)
        • 대칭키 암호알고리즘
        • 비대칭키 암호알고리즘
        • 메시지 다이제스트
        • 탈옥및 루팅 탐지및 차단
        • 앱 위/변조 탐지및 차단
        • 코드 난독화
    • 🖥️관리시스템
    • 🎆협업도구
  • UIUX 컴포넌트
    • UI/UX
      • 테마 적용
      • 화면방향전환
      • 토스트 (Toast)
      • 버튼 (Button)
      • 텍스트 (Text)
      • 탭바 (TabBar)
      • 이미지뷰 (ImageView)
      • 카메라/이미지
      • 페이지 트랜지션
      • 입력필드 (TextField)
      • 체크박스 (CheckBox)
      • 라디오버튼 (RadioButton)
      • 로딩바 (Loading Indicator)
      • 바텀시트 (BottomSheet)
      • 리스트뷰 (ListView)
      • 슬리버 (Sliver)
      • 사운드 (Sound)
      • 애니메이션 (Animation)
      • 위치 및 정렬
      • 커스텀 키보드
      • 카드 (Card)
      • 토글 버튼 (Toggle Button)
      • 다이얼로그 (Dialog)
      • QR코드
      • 페이지뷰 (PageView)
  • Common 컴포넌트
    • 공통모듈
      • 데이터통신과 JSON 파싱
      • 인증 연동
      • 채널링
      • 네비게이션
      • 푸시 메시지
      • SMS 인증
      • 예외처리
  • Security 컴포넌트
    • 보안모듈
      • 메시지 다이제스트
      • 암/복호화
  • Option 컴포넌트
    • 옵션모듈
      • 동영상 플레이어
      • 유튜브 연동
      • 차트
      • SNS 공유
      • 지도
      • 로컬 DB
  • 🎁라이센스및 기술지원
  • 🏢고객사
Powered by GitBook
On this page
  • Widget
  • 페이지 작성 단계
  • 1. MaterialApp 생성
  • 2. 페이지 클래스 작성
  • 3. 페이지 라우팅
  • 4. 다른 페이지 작성
  1. 크로스플랫폼 개발환경
  2. 코드가이드

페이지 작성

Flutter는 모바일 앱 및 웹 앱을 개발하는 강력한 프레임워크로, 다양한 화면을 구성하는 것이 중요한 업무 중 하나입니다. 아래에서 Flutter로 페이지를 작성하고 관리하는 방법을 확인해보세요.

Widget

Flutter에서 UI는 위젯(Widgets)으로 구성됩니다. 모든 것이 위젯이며, 이 위젯들을 조합하여 화면을 작성합니다. 화면 전환 및 페이지 작성에 필요한 위젯에 대해 이해하는 것이 중요합니다.

일반적으로, 다음과 같은 위젯이 페이지 작성에 사용됩니다

  • Scaffold: 기본 레이아웃을 제공하며, AppBar 및 기본 배경색과 같은 기본 구성 요소를 제공합니다.

  • AppBar: 앱 상단에 표시되는 타이틀 바 또는 액션을 설정합니다.

  • Body: 화면의 본문 내용을 나타내는 부분입니다. 주로 ListView, Column, 또는 Container와 같은 위젯을 사용하여 구성합니다.

  • Navigator: 화면 전환을 관리하기 위한 위젯으로, 다른 페이지로 이동하거나 이전 페이지로 돌아가는 데 사용됩니다.

페이지 작성 단계

1. MaterialApp 생성

Flutter 앱의 진입점에서 MaterialApp을 생성합니다. 이 위젯은 기본 MaterialApp 설정을 제공하며, 앱의 테마 및 라우팅을 관리합니다.

void main() {
  runApp(
    MaterialApp(
      home: MyHomePage(), // 앱의 첫 페이지 설정
    ),
  );
}

2. 페이지 클래스 작성

각 페이지는 Dart 클래스로 작성됩니다. 아래는 간단한 페이지 클래스의 예제입니다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('내 페이지'),
      ),
      body: Center(
        child: Text('안녕하세요, Flutter 페이지!'),
      ),
    );
  }
}

3. 페이지 라우팅

다른 페이지로 이동하기 위해 Navigator를 사용합니다. 아래는 버튼을 클릭하면 다른 페이지로 이동하는 간단한 예제입니다.

ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SecondPage()),
    );
  },
  child: Text('두 번째 페이지로 이동'),
)

4. 다른 페이지 작성

두 번째 페이지를 위한 클래스를 작성하고 이동할 때 해당 클래스를 호출합니다.

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('두 번째 페이지'),
      ),
      body: Center(
        child: Text('두 번째 페이지입니다.'),
      ),
    );
  }
}

Flutter를 사용하여 페이지를 작성하고 관리하는 것은 간단하고 유연한 프로세스입니다. 위젯을 효과적으로 조합하고 페이지 간 전환을 관리하여 앱의 사용자 경험을 향상시킬 수 있습니다. 페이지 작성은 Flutter 앱 개발의 기초 중 하나이며, 이를 마스터하면 다양한 화면 및 기능을 구축하는데 도움이 됩니다.

Previous디렉토리 생성및 관리NextFlutter 아키텍쳐

Last updated 1 year ago

🚦
Page cover image