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: 리액티브 시스템

ref()의 동작 ref() 함수의 동작을 배우려면 리액티브시스템을 이해할 필요가 있다. 리액티브란 변수의 값의 변화에 연동해서 …

답글 남기기

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