홈페이지 위젯 생성 테스트

출처 : UnSplash

홈페이지 위젯 생성 테스트

 

 

🌏 Test Code

import 'package:flutter/material.dart';

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

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

  // 이 위젯은 앱의 근간이 되는 페이지
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter IoT Test',
      theme: ThemeData(
        // 여기부터 앱주제 부분
        // 앱을 실행시키면 툴바창을 볼 수 있고 앱을 종료시키지 않은 채로
        // 아래 'primarySwatch'에서 컬러를 초록색으로 변경시켜 보자.
        // 창을 새로고쳐서 볼 때는 안드로이드SDK에서 오른쪽 상단메뉴에서 번개표시가
        // 된 "hot reload"를 클릭하자.이것은 앱을 다시 시작하지 않고서 새로고침한 것이다.
        primarySwatch: Colors.blue,
      ), // ThemeData
      home: const MyHomePage(title: 'Flutter Test Page'),
    );  // MaterialApp
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  // 이 위젯은 앱의 홈페이지이다.
  // 모양에 영향을 주는 필드가 포함된 state 개체를 가지고 stateful 위젯이다.
  // 이 클래스는 state에 대한 설정이다. 부모로부터 제공되거나 state의 build method에서
  // 사용되는 값들을 보유하고 있다. 위젯의 하위 클래스 필드는 항상 'final(최종)'으로 표시된다.
  
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      
      // setState 호출은 플러터 프레임워크에 이 state에서 뭔가가 변경되었다는 것을 알린다.
      // 그렇게 해서 아래의 빌드 메서드를 다시 실행하여 디스플레이에 업데이트된 값을 반영할 수 있게 한다.
      // setState()를 호출하지 않고 _counter를 변화시켰다면, 빌드 메서드는 다시 호출되지 않아
      // 아무 것도 일어나지 않았을 것이다.
      
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    
    // 이 메서드는 위에 _incrementCounter 메서드에 의해 실행된 것처럼
    // 매번 setState를 호출할 때마다 다시 실행된다.    
    // 플러터 프레임워크는 빌드 메서드를 빠르게 재실행할 수 있도록 최적화되어 있어서
    // 위젯 인스턴스를 개별적으로 변화시키지 않고도 업데이트가 필요한 모든 것들을 다시 빌드할 수 있다.    
        
    return Scaffold(
      appBar: AppBar(
        
        // App.build 메서드에 의해 생성된 MyHomePage 개체에서 값을 가져와서
        // appbar 제목을 설정하는데 사용한다.
        
        title: Text(widget.title),
      ), // 앱바 (Appbar)
      body: Center(        
        // Center는 레이아웃 위젯이다. 
        // 하나의 자식을 가져와 부모의 중간에 배치한다.
        
        child: Column(
          
          // 열(column)은 레이아웃 위젯이다. 자식 목록을 가져와서 세로로 정렬한다.
          // 디폴트 기본값은 가로로 자식 크기에 맞게 크기가 조정되고 부모키 만큼의 높이가 된다.
          
          // debug painting 을 호출하여 (콘솔에서 p를 누르고 Android studio의 
          // flutter instpector에서 Toggle Debug Paint 작업을 선택하거나
          // Visual Studion Code에서 Toggle Debug Paint 명령을 선택함) 각 위젯의
          // 와이어프레임을 확인한다.
          
          // 열에는 자체 크기와 자식 위치를 제어하는 다양한 속성이 있다.
          // mainAxisAlignment를 사용하여 자식을 세로로 가운데에 맞춘다.
          // 열이 수직이기 때문에 여기에서 주 축은 수직축이다.(횡축은 수평이 됨)
          
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ), // 텍스트(text)
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ), // 텍스트(text)
          ],   // 위젯 (widget)
        ),     // 컬럼 (column)
      ),       // 센터 (center)
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // 이 후행쉼표는 빌드메서드에 대해 자동서식을 더 멋지게 만들어 준다.
    );   // 스캐폴드 (Scaffold)
  }
}

 

 

🌎 크롬 브라우저에서 띄운 앱 페이지

위 코드를 안드로이드 스튜디오에서 'run'하면 크롬 브라우저가 자동으로 띄워 지면서 아래와 같은 페이지를 볼 수가 있게 된다. 아래 그림의 오른쪽 아래에 동그라미를 계속 누르면 중간에 숫자가 카운트되면서 올라간다. 위 코드에서 간단히 제목을 변경하고 색깔도 변경할 수가 있다.

안드로이드 스튜디오에서 오른쪽 상단 메뉴에서 번개모양으로 되어 있는 부분 'Flutter Hot Reload'를 클릭하면 앱을 다시 시작하지 않고도 현재 띄워진 크롬창을 새로고침을 할 수 있다. 물론 크롬창이 실시간으로 업데이트 되고 있기 때문에 굳이 그렇게 하지 않아도 되지만, 강제로 초기화할 경우에는 이 기능을 이용하면 된다. 그리고 코딩을 수정하면 바로 즉시 크롬창이 업데이트 되면서 변경되는 것을 볼 수 있다.

원래 처음에는 하늘색이었는데 녹색으로 코딩을 변경했음, 오른쪽 아래 동그라미 아이콘을 누르면 화면 중간 숫자가 카운트되어 올라감. 숫자를 초기화하여 0에서 다시 시작하려면 안드로이드 스튜디오 'Flutter Hot Reload' 번개 아이콘을 클릭하면 새로고침 초기화가 됨

🔎 느낀점

소스코드를 프로그래밍 또는 디버깅 업데이트하면서 바로바로 창을 자동으로 직관적으로 확인할 수 있으니까 굉장히 재밌을 것 같다. 아무 것도 모르는 상황에서 주어진 샘플 코드로 이런 화면을 아웃풋으로 '툭' 튀어나게 해서 보여주니, "이제 저 코드를 어떻게 요리해서 사용할까?"라는 궁금증이 생기면서 공부를 자연스럽게 시작할 수 있는 것 같다.

노코딩으로 앱을 만들어 성공하는 사람들의 경험담이 많아지는 것을 보면, 코딩은 이제 점점 더 쉬워지고 접근성이 높아지고 있다는 생각이 든다. 또한 그렇게 해서 시작한 사람들이 좀 더 복잡한 앱에 도전하기 위해 다시 코딩을 하게 될텐데, 이들이 더 쉽고 빠르게 코드를 만드는 그 날이 임박한 것 같다. 물론 프로그래밍 전문가들의 일은 좀 더 구체적이고, 시스템적이고, 연구적이겠지만, 사용자의 입장에서 그 수준까지 접근하지 않고도 충분히 자유롭게 앱을 만들고 서비스할 수 있는 날이 도래했다는 의미이다.

과거는 Pioneer의 시대였고, Fast follower의 시대였지만, 지금은 Creator의 시대이자, Communicator의 시대이기 때문에 그에 맞는 연장도구 개발이 필요한 것이다.

반대로 다시 말한다면, 과거에는 무에서 유를 만들 도전적 리더가 없었기 때문에 개척자적 Developer, Follower가 필요했지만, 지금은 유에서 다시 무가 되게 하고 유가 되게 하는 두 방향의 창의성이 필요하기 때문에, 크리에이터가 필요한 것이고, 또 그 크리에이터들을 잘 묶어서 세상에 영향력을 발휘하게 할 커뮤니케이터가 필요하고 그런 커뮤니티가 필요한 것이다.