https://stackoverflow.com/questions/30605949/is-it-possible-to-remove-weston-toolbar

 

Is it possible to remove Weston toolbar?

Is it possible to have weston run without the toolbar at the top and change the background to black. So that when i have a script in init.d it calls weston first than my qt5 app? such as: weston &...

stackoverflow.com

 

반응형

QAbstractItemModel을 적용하고 있는 View에 보여지는 폰트 변경하는 방법입니다.

 

일단 예시로 QAbstractItemModel을 상속받고 있는 QFileSystemModel을 상속받는 다른 클래스를 만들어 줍니다. 그리고 data 함수와 headerData 함수를 오버라이딩 합니다.

class MyFileSystem : public QFileSystemModel 
{
    QVariant data ( const QModelIndex& index, int role ) const;
    QVariand headerData (int section, Qt::Orientation orientation, int role ) const;
    ...;
};

data 함수를 통해 본문의 폰트를 수정, headerData 함수를 통해 가장 상단 header의 폰트를 수정할 수 있습니다.

QFont font;

QVariant data( const QModelIndex& index, int role )
{
    if ( role == Qt::FontRole ) {
    	return font;
    }
    
    return QFileSystemModel::data(index, role);
}
    
QVariand headerData(int section, Qt::Orientation orientation, int role ) 
{
    if ( role == Qt::FontRole ) {
    	return font;
    }
    
    return QFileSystemModel::headerData(section, orientation, role);
}

위 role에서 폰트 말고도 여러 enum 값을 통해 다양한 설정이 가능합니다.

 

Qt의 Model / View 관련한 다른 내용은 이 링크 참고 부탁드립니다.

 

Qt 4.8: Model/View Tutorial

Model/View Tutorial Every UI developer should know about ModelView programming and the goal of this tutorial is to provide you with an easily understandable introduction to this topic. Table, list and tree widgets are components frequently used in GUIs. Th

het.as.utexas.edu

 

반응형

'Programming > Qt' 카테고리의 다른 글

[Qt] 리눅스 마우스 매크로 만들기  (1) 2022.09.21
Qt Grid Layout addWidget 시 Span 조절  (0) 2022.09.01
Qt Creator white space 표시 제거  (0) 2022.01.18
Qt ToolTip  (0) 2021.08.17
Qt TableWidget 사용하기  (0) 2021.08.11

dynamic

기존 dart 문법에서 var 자료형을 쓰면 처음 초기화 한 형태에 맞는 자료형을 갖게 됩니다. 하지만 한번 자료형이 정해진 var 변수에 다른 형태의 자료형을 그냥 대입하려 하면 문제가 생기는데 dynamic을 사용하면 대입할 때 마다 값에 맞는 자료형으로 바뀌게 됩니다.

Nullable, Non-Nullable, Null 인식 연산자

NULL이 될수 있는지 없는지 명시해줄 때 사용합니다.

null 인식 연산자(??=)의 경우 값에 null이 들어있을 경우에만 해당 값을 대입합니다.

const, final

두 키워드 모두 값의 불변을 위한 키워드로 사용합니다.

두 키워드의 차이점은 DateTime.now 같이 유동적으로 코드가 실행되는 순간 결정되는 값에는 const를 사용할 수 없습니다.  final은 빌드 시 값을 몰라도 되지만 const는  빌드 시 값을 알아야 하기 때문에 사용이 불가능 합니다.

그리고 이 키워드 사용시 var 없이도 알아서 자료형을 잡아줍니다.  (dynamic이 아니므로 다른 자료형의 값을 넣을 수 없습니다.)

Named Paramter

함수에 인자를 넘길 때 인자를 명시하면서 넘겨주는 방식입니다.

Arrow

함수에서 반환되는 값을 간단히 표현하기 위해 => 연산자를 사용합니다.

위에 작성한 간단한 설명은 제가 잘 몰랐던 문법이라 정리해 두었습니다. 다른 기초 문법의 경우 아래 유튜브 영상을 참고해주시기 바랍니다.

 

반응형

'Programming > Flutter' 카테고리의 다른 글

[Flutter] 레이아웃과 위젯  (0) 2022.11.20
[Flutter] 프로젝트 내 폰으로 실행  (0) 2022.11.20
[Flutter] 기본 프로젝트 설명  (0) 2022.11.18
[Flutter] 비동기 처리  (0) 2022.11.18
[Flutter] 개발 환경 세팅  (0) 2022.11.17

이전에 했던 기본 프로젝트에 위젯을 몇개 추가해보고 이벤트 실습도 해보겠습니다. 

 

먼저 Button 입니다. Button을 클릭하면 카운터를 초기화 하는 이벤트입니다. 기본 State 객체에 버튼을 하나 추가했습니다.

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

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.bodyText2
            ),
            TextButton(
                onPressed: () {
                  setState(() {
                    _counter = 0;
                  });
                }                 
                , child: const Text('Clear'))
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
      
    );
  }
}

clear 버튼을 누르면 카운터 변수 값이 초기화되고 화면이 갱신됩니다.

이 버튼의 종류는 여러가지가 있지만 일반적인 버튼은 TextButton, ElevatedButton, OutlineButton 등이 있습니다. 

ElevatedButton
OutlineButton

다음으로 입력창입니다. 입력 위젯은 TextField입니다.

화면을 보니 Clear 버튼의 글자 크기가 너무 작은거 같아서 TextField를 통해 폰트 크기를 전달 받고 Change 버튼을 누르면 Clear 버튼의 글자 바꿔 키워보겠습니다.

TextField로 입력한 값을 받아 활용하기 위해서는 TextEditingController를 사용해야 합니다. 기존 레이아웃은 column으로 font 변경관련은 row로 배치하기 위해 Container로 분리하였습니다.

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  TextEditingController value = TextEditingController();

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(20),
              child: Column(
                children: <Widget>[
                  const Text(
                    'You have pushed the button this many times:',
                  ),
                  Text(
                      '$_counter',
                      style: Theme.of(context).textTheme.bodyText2
                  ),
                  TextButton(
                      onPressed: () {
                        setState(() {
                          _counter = 0;
                        });
                      }
                      , child: const Text('Clear')
                  ),
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.all(20),
              child: Row(
                children: <Widget>[
                  const Text(
                      'Font Size ='
                  ),
                  TextField(
                    keyboardType: TextInputType.number,
                    controller: value,
                  ),
                  ElevatedButton(
                      onPressed: (){},
                      child: const Text(
                        'Change'
                      ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.

    );
  }
}

그런데 실제 결과를 보면 아래처럼 입력창이 제대로 나오지 않습니다.

Row 배치를 Column 배치로만 바꾸면 제대로 나옵니다.

이때는 TextField를 Flexible로 감싸면 됩니다.

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  TextEditingController value = TextEditingController();

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(20),
              child: Column(
                children: <Widget>[
                  const Text(
                    'You have pushed the button this many times:',
                  ),
                  Text('$_counter',
                      style: Theme.of(context).textTheme.bodyText2),
                  TextButton(
                      onPressed: () {
                        setState(() {
                          _counter = 0;
                        });
                      },
                      child: const Text('Clear')),
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.all(20),
              child: Row(
                children: <Widget>[
                  const Text('Font Size ='),
                  Flexible(
                    child: TextField(
                      keyboardType: TextInputType.number,
                      controller: value,
                    ),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: const Text('Change'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

이제 이 입력 창을 클릭하면 숫자를 입력할 수 있는 키패드가 나오게 됩니다.

이제 입력 값을 통해 FontSize를 변경하기 위해 Button onPressd 시 TextEditingController 값을 파싱합니다. 그 후 SetState를 호출하면서 파싱된 값을 Size 변수에 넘기고 Size의 값은 Button의 TextStyle에 넘겨주게 됩니다.

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  TextEditingController value = TextEditingController();
  int size = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(20),
              child: Column(
                children: <Widget>[
                  const Text(
                    'You have pushed the button this many times:',
                  ),
                  Text('$_counter',
                      style: Theme.of(context).textTheme.bodyText2),
                  TextButton(
                      onPressed: () {
                        setState(() {
                          _counter = 0;
                        });
                      },
                      child: Text('Clear',
                        style: TextStyle(
                          fontSize: size.toDouble()
                        ),
                      ),
                  ),
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.all(20),
              child: Row(
                children: <Widget>[
                  const Text('Font Size ='),
                  Flexible(
                    child: TextField(
                      keyboardType: TextInputType.number,
                      controller: value,
                    ),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      setState(() {
                        size = int.parse(value.value.text);
                      });
                    },
                    child: const Text('Change'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

반응형

'Programming > Flutter' 카테고리의 다른 글

[Flutter] Dart 문법  (0) 2022.11.23
[Flutter] 프로젝트 내 폰으로 실행  (0) 2022.11.20
[Flutter] 기본 프로젝트 설명  (0) 2022.11.18
[Flutter] 비동기 처리  (0) 2022.11.18
[Flutter] 개발 환경 세팅  (0) 2022.11.17

프로젝트 만들고 소스 작업을 하고 테스트를 위해서 에뮬을 통해서 결과물을 확인했었습니다. 하지만 이 안드로이드 스토디오에 에뮬레이터에 크롬까지 띄우면 메모리 사용량이 어마어마합니다. 그래서 에뮬을 사용하지 않고 폰에서 직접 실행 / 테스트하려고 합니다.

 

갤럭시 s22 ultra, win 10 노트북 기준 설명입니다. 먼저 각 제조사 핸드폰 usb 드라이버를 설치합니다. 삼성의 경우 이 링크에서 설치가 가능합니다.

 

다운로드 자료실 | 스스로해결 | 삼성전자서비스

다운로드 자료실 원하시는 정보를 못 찾으셨다면 아래 서비스를 이용해보세요. 문제해결이 되지 않거나 어려우시다면 인공지능 채팅 로봇으로 상담을 받아보시기 바랍니다. 무상 보증기간 이

www.samsungsvc.co.kr

다음으로 핸드폰에서 [설정] > [휴대전화 정보]로 들어갑니다.

[소프트웨어 정보]로 들어갑니다.

중간에 있는 [빌드번호]를 여러번 클릭하면 개발 설정 n 단계 전입니다.라고 메시지가 뜹니다.

Pin 번호를 입력하면 아래처럼 개발자 모드를 켰습니다. 라고 메시지가 뜹니다.

그 후 다시 [설정] 화면으로 돌아오면 [개발자 옵션] 메뉴가 생긴 것을 볼 수 있습니다.

[개발자 옵션]에서 쭉 내리다보면 [디버깅]에 [USB 디버깅] 옵션이 있는 것을 볼 수 있는데 이 옵션을 활성화시켜줍니다.

그 후 안드로이드 스튜디오를 실행하면 USB 디버깅을 허용하시겠습니까 라는 알림이 뜨는데 허용을 눌러줍니다.

만약 이 알림이 안 뜬다면 알림바를 내려 Android 시스템에서 USB 액션을 선택 후 [USB를 제어할 기기]에서 [연결된 기기]를 한번 클릭한다면 재연결 되듯이 보이면서 위 알림이 보일 겁니다.

 

그 후 우측 상단 장비 모델 명이 스마트폰의 모델 코드인 것을 확인하고 실행 버튼 혹은 [Shitf] + [F10]으로 실행하면 어플에 실행 결과를 확인할 수 있습니다.

반응형

'Programming > Flutter' 카테고리의 다른 글

[Flutter] Dart 문법  (0) 2022.11.23
[Flutter] 레이아웃과 위젯  (0) 2022.11.20
[Flutter] 기본 프로젝트 설명  (0) 2022.11.18
[Flutter] 비동기 처리  (0) 2022.11.18
[Flutter] 개발 환경 세팅  (0) 2022.11.17

이전에 만들었던 프로젝트를 열면 왼쪽 [Project]에 여러 파일들이 있습니다.

기본적으로 작업하는 dart 파일은 lib 폴더에 그리고 특이하게도 테스트 용 dart 폴더가 따로 존재합니다. 그 의외에도 여러 파일들이 있지만 추후 설명하겠습니다.

 

dart 파일을 위에서부터 보겠습니다. 먼저 import 입니다. 소스 파일에서 사용하려는 패키지를 불러올 때 사용합니다. 

import 'package:flutter/material.dart';

해당 패키지한 내용은 이 링크를 통해 확인하실 수 있습니다.

 

다음으로 main 함수입니다. runApp을 통해 위젯을 전달해 앱을 시작하게 됩니다.

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

다음으로 전달되는 위젯 클래스 MyApp입니다. MyApp은 StatelessWidget이라는 클래스를 상속받았습니다. StatelessWidget을 상속받은 위젯은 변화가 없는 즉 Run 이후 한번 로딩되면 바뀔일이 없는 위젯이 상속받아 사용합니다. 이 StatelessWidget은 build를 한번 호출해 기본 UI를 미리 구축해 놓습니다. 이제 StatelessWidget을 상속받은 MyApp도 build를 재정의하여 MyApp만의 화면을 build하여 MaterialApp을 리턴합니다. 

class MyApp extends StatelessWidget {
  const MyApp({super.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: const MyHomePage(title: 'Flutter Demo Home Page'),    // 앱 실행시 첫 실행할 위젯 지정
    );
  }
}

다음으로 MyApp에서 지정한 첫 실행에 세팅된 MyHomePage 클래스입니다. 이 클래스는 위 클래스와 다르게 StatefulWidget을 상속받았습니다. StatelessWidget과 다르게 화면에 갱신이 필요한 위젯(클래스)는 이 클래스를 상속받습니다. StatefulWidget은 먼저 State를 생성하기 위해 createState를 호출하는데 이때 State 객체를 생성합니다. createState() 옆에 =>는 return 이라고 생각하시면 됩니다. 

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

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

마지막으로 생성한 State에 대한 설명입니다. 아래 build는 위 StatelessWidget과 같이 Widget을 생성해 반환하여 화면에 그려줍니다. 가장 처음에 있는 counter 변수는 언더바가 가장 앞에 적혀있는데 이는 현재 dart 파일에서만 사용한다는 의미입니다. incrementCounter 함수도 내부 함수이며 구현에 setState를 통해 위젯을 갱신합니다.

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

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          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.
    );
  }
}

build에서 Scaffold라는 것을 return 하는데 기본 어플의 뼈대라고 생각하면 편할거 같습니다. 기본적으로 appbar, body,bottomNavigationbar 등이 있고 상황에 따라 원하는 구조를 추가할 수 있고 Scafforld 내에서 [ctrl] + [space]를 통해 옵션들을 확인할 수 있습니다. 

body에 Center 함수로 화면 가운데 위치시키면서 child 옵션으로 Column을 그 안에 Children을 통해 Text 위젯들을 넣었습니다. 이처럼 하위에 위젯을 놓을 때 하나를 놓기 위해선 child, 여러개를 놓기 위해서는 children을 호출합니다.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          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.
    );

마지막으로 floatingActionButton에 있는 onPressed는 클릭하였을 때 incrementCounter 함수를 호출해주고 그 함수는 위에서 setState를 통해 count 개수를 늘리며 화면을 갱신해주고 있습니다. 

반응형

'Programming > Flutter' 카테고리의 다른 글

[Flutter] Dart 문법  (0) 2022.11.23
[Flutter] 레이아웃과 위젯  (0) 2022.11.20
[Flutter] 프로젝트 내 폰으로 실행  (0) 2022.11.20
[Flutter] 비동기 처리  (0) 2022.11.18
[Flutter] 개발 환경 세팅  (0) 2022.11.17

다트 언어에서 비동기 처리를 지원합니다. 비동기 처리는 어떤 호출이 끝나기를 마냥 기다리는 것이 아닌 일단 호출 후 다른 작업 후 추후에 처리를 해주게 됩니다. 이 비동기 처리는 파일 IO, 데이터베이스 처리, 네트워크와 같이 언제 끝날 지 모르는 작업에 유용하게 사용됩니다. 

동기/비동기에 대한 윈도우 시스템이 궁금하시다면 이 링크를 클릭해주세요.

 

다트에서 비동기 처리를 위해 사용되는 예약어는 async, await, Future을 통해 진행됩니다. 설명에 앞서 간단한 예제를 보여드리겠습니다.

void main() {
  print('Hello World!');
  PrintValue(); 
  print('Main End');
}

Future PrintValue() async {
  print('PrintValue Start');
  var value = await Getvalue();
  print(value);
  print('PrintValue End');
}

int Getvalue() {
  return 1;
}

비동기 처리에 대한 개념 없이 봤을 때 예상되는 호출 결과는

Hello World!

PrintValue Start

1

PrintValue End

Main End

가 될 것입니다. 하지만 실제 실행 결과를 보시면 아래와 같습니다.

PrintValue 함수에서 await가 붙은 함수 다음 동작을 기다리지 않고 Main End부터 실행합니다. 그 이후 Getvalue의 결과를 출력하고 마지막으로 PrintValue End를 출력합니다. 

이 결과는 future async await로 인해 비동기로 처리가 되는데 PrintValue 함수 뒤에 붙은 async로 PrintValue 함수를 비동기 함수로 만들겠으며 await가 붙은 GetValue 함수를 비동기 처리를 하겠다는 의미입니다. 그렇기 때문에 PrintValue 함수 안의 GetValue 다음 행동은 GetValue가 마무리 될 때 까지 기다렸다 실행히 되고 PrintValue 이후는 그대로 진행이 되는 것입니다.

 

위 구성에서 await를 사용하기 위해서 Future는 생략해도 가능하지만 async를 생략하면 에러가 발생합니다.

await의 반환 값을 사용하는 방법에는 위와 같이 사용하는 방법과 then을 사용하는 방법이 있습니다. 그러기 위해선 호출하는 함수의 반환 타입이 Future 클래스에 타입을 명시해줘야 합니다.

void main() {
  print('Hello World!');
  PrintValue(); 
  print('Main End');
}

Future PrintValue() async {
  print('PrintValue Start');
  await Getvalue().then((value) => {
    print(value)
  });
  
  print('PrintValue End');
}

Future<int> Getvalue() async {
  return 1;
}

반응형

'Programming > Flutter' 카테고리의 다른 글

[Flutter] Dart 문법  (0) 2022.11.23
[Flutter] 레이아웃과 위젯  (0) 2022.11.20
[Flutter] 프로젝트 내 폰으로 실행  (0) 2022.11.20
[Flutter] 기본 프로젝트 설명  (0) 2022.11.18
[Flutter] 개발 환경 세팅  (0) 2022.11.17

플러터 개발 환경 세팅에 앞서 먼저 현재 모바일 시장은 안드로이드와 IOS로 나뉠 수 있고 각 환경의 어플 개발을 위해서 안드로이드는 자바, 코틀린 언어를 통해 개발을 하며 IOS의 경우 Object-C, Swift를 통해 개발을 하고 있습니다. 이렇게 각 운영체제에 맞는 언어로 개발한 것은 네이티브 앱이라고 합니다. 반대로 두 운영체제를 구분하지 않고 구별할 수 있는 방법으로 웹앱, 프로그레시브 웹앱, 하이브리드 앱 등이 등장했습니다.

그러더니 자바스크립트를 사용하는 리액트 네이티브와 다트라는 언어를 사용하는 플러터라는 크로스 플랫폼 프레임워크가 등장하였습니다. 이 중 우리는 플러터라는 프레임워크를 공부해볼 예정입니다.

 

환경 세팅에 앞서 저의 PC 환경은 Windows 10, Dell Notebook 16GB Ram입니다. 윈도우 환경에 맞춰 개발 및 포스팅이 진행되니 이점 참고 부탁드립니다.

 

먼저 안드로이드 스튜디오를 설치하겠습니다. 

 

Download Android Studio & App Tools - Android Developers

Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.

developer.android.com

다운받은 설치 파일을 실행합니다.

선택 후 Next를 통해 설치를 마무리합니다.

 

 

여기까지 진행했으면 안드로이드 스튜디오 설치는 마쳤습니다. 다음으로 플러터 SDK를 설치하겠습니다.

 

Install

Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems.

docs.flutter.dev

다운로드한 zip 파일의 압축을 해제합니다.

압축이 성공적으로 해제됐다면 [Win] + [R]을 통해 CMD 창으로 들어가 아래처럼 flutter 설치 경로의 bin폴더에 들어갑니다. flutter doctor을 실행하여 개발 환경을 체크합니다.  

다음으로 다시 android studio로 돌아가 flutter plugin 설치해야 합니다. 중간에 나오는 Dart 설치 알림으로 같이 설치합니다.

Restart IDE를 통해 android studio 재 실행 시 New Flutter Project가 생겼고 클릭해줍니다.

아래 창이 나오면 Flutter 선택 후 아까 설치한 Flutter SDK 경로를 선택합니다.

Finish 버튼을 누르면 기본 프로젝트가 생성된 것을 확인할 수 있습니다. 

예제 프로젝트를 실행해보기 위해 우측 상단에 핸드폰 아이콘 옆 안드로이드 아이콘이 있는 Device Manager를 선택합니다. 

재생(시작)아이콘을 눌러 AVD를 실행합니다. 

마지막으로 오른쪽 상단에 있는 초록색 재생(실행) 버튼을 누르거나 [Ctrl] + [F10]으로 실행하면 우측 Emulator에 실행 화면을 볼 수 있고 드래그하면 큰 화면으로도 볼 수 있습니다.

반응형

'Programming > Flutter' 카테고리의 다른 글

[Flutter] Dart 문법  (0) 2022.11.23
[Flutter] 레이아웃과 위젯  (0) 2022.11.20
[Flutter] 프로젝트 내 폰으로 실행  (0) 2022.11.20
[Flutter] 기본 프로젝트 설명  (0) 2022.11.18
[Flutter] 비동기 처리  (0) 2022.11.18

+ Recent posts