Flutter: Hello World

얼마만일까. 도서의 코드를 하나부터 열까지 직접 입력하며 실행해본 것이. 특히나 안드로이드 앱 프로그래밍은 2017년 이래인 듯 하다. 업무를 위해 Flutter 공부를 시작하고 있어서, ‘요즘 앱 프로그래밍’을 하나씩 터득하는 중이다.

한국 도서를 읽으며 예제를 따라하는 중…

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),//const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {

  var _index = 0; // 페이지 인덱스 0,1,2

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('복잡한 UI'),
      ),
      body: Center(
        child: Text(
          '$_index 페이지',
          style: TextStyle(fontSize: 40),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (index){
          setState(() {
            _index = index;
          });
        },
        currentIndex: _index, // 선택된 인덱스
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              label: '홈',
              icon: Icon(Icons.home),
          ),
          BottomNavigationBarItem(
              label: '이용서비스',
              icon: Icon(Icons.assignment),
          ),
          BottomNavigationBarItem(
              label: '내 정보',
              icon: Icon(Icons.account_circle),
          ),
        ],
      ),
    );
  }
}
이렇게 쉽게 만들 수 있다니…

오랜만에 즐거움을 느끼며 진행 중. dartpad.dev에서 main.dart파일을 바로 실행해볼 수 있다는 것도 참으로 신기하고, 재미있다.

이것도 살펴보세요!

Vue3: 프로젝트 폴더/파일 구성, ESLint

새로 만든 Vue 프로젝트의 폴더/파일 구성 폴더/파일내용.vscodeVisual Studio용 설정 파일dist배포용 파일 세트를 저장node_modules라이브러리를 저장public웹으로 공개할 …

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다