Flutter Test App의 구조

플러터 개발자 사이트의 첫번째 설치 및 테스트 앱을 만들어보았습니다.

 

일단 첫 테스트 플러터 앱의 코드를 열어 보면 아래와 같을 겁니다.

 

이제 기본 개발될 앱의 모습은 있으니 해당 테스트앱 안쪽의 구조를 이해하고 여기에다 필요한 디자인 요소와 기능 요소들을 넣어서

앱을 만들어 보면서 익히면 될꺼 같습니다. 

 

실제 기본 앱의 틀이 플러터의 프레임워크가 제공하는 상태가 된다는걸 이해를 하였고 

해당 기본 프레임워크를 사용해서 우리가 만들고자 하는 앱의 기능들을 어떻게 구현하면 되는지를 코딩 하면서 익히고 

난뒤에 실제 테스트와 사용을 통한 스스로의 피드백을 통해서 기술적 노하우와 그리고 프레임워크의 필요한 세부 사항들을 익혀가는 식으로 늘려가면 될꺼 같습니다.  

 

하여 일단 테스트 앱의 구조를 익혀보도록 할까 합니다. 

제가 플러터 설치 이후 만들어진 테스트 앱의 main은 아래와 같았습니다. 

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(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

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

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

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    å// This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

 

 

App Bar 

 

Scafford 

 

Material App 

 

import 'package:flutter/material.dart';

void main() {

}

class MyApp extends StatelessWidget {

      // This widget is the root of your application.
      @override
       Widget build(BuildContext context) {          
       }
}

class MyHomePage extends StatefulWidget {

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

     return Scanffold (
          appBar: AppBar(           ),

          body: Center(  child: Column(
                    children: <Widget>[            ],
                 ),
            ),
      

      floatingActionButton: FloatingActionButton(
       ), // This trailing comma makes auto-formatting nicer for build methods.

    );
  }
}

 

 

 

 

같이 보면 좋은 글들입니다. 

 

• 1. What is Flutter?
• 2. Install Flutter on my Mac Book pro ( M계열 칩 )
• 3. [IDE Install] Android Studio
• 4. [IDE Install] VS Code
• 5. [VS Code]Flutter Test 앱을 만들어 iPhone에 배포하기
• 6. [Android Studio]Flutter 테스트 소스를 안드로이드폰/iPhone에 배포하기
• 7. Flutter 첫번째 나의 앱 만들기
• Flutter Test App의 구조
• [아키텍처]Flutter 아키텍처 개요
• [Q&A]Flutter 개발자 사이트 영문 / 국문 어느걸 봐야 할까?