전체 글 412

[Flutter] 이미지 리스트 샘플 앱

main.dart시작. flutter는 첫진입은 일반적으로 lib/main.dart로 시작된다. -매트리얼 테마를 사용하기 위해서 import -runApp은 메테리얼 라이브러리를 통해 실행된다. -App은 따로 빼서 진행한다. #lib/main.dart import 'package:flutter/material.dart'; import 'src/app.dart'; void main(){ runApp(App()); } lib에 src폴더를 만들고 app.dart를 생성한다. -StatefulWidget을 통해서 서버로 들어오는 아이템들을 리스트로 보내주고 있다. -Scaffold는 Floating Action Button과 타이틀바 및 바텀바등을 기본적으로 가지는 위젯이다. -await은 비동기 방식을 ..

Flutter & Dart 2022.10.22

[Flutter] 새로운 화면으로 데이터 보내기

1.Todo 클래스를 정의합니다. 2.Todo 리스트를 보여줍니다. 3.Todo에 대한 상세 정보를 보여줄 수 있는 화면을 생성합니다. 4.상세 화면으로 이동하면서 데이터를 전달합니다. 1. class Todo{ final String title; final String description; Todo(this.title, this.description); } 2. final todos = List.generate( 20, (i) => Todo( 'todo $i', 'description Todo $i', ), ); -ListView를 사용하여 Todo리스트 보여주기 ListView.builder( itemCount: todos.length, itemBuilder: (context, index){ ret..

Flutter & Dart 2022.10.22

[Fluetter] StatefulWidget & Lifecycle

[Fluetter] StatefulWidget & Lifecycle StatefulWidget 1.StatefulWidget을 extends한다. class App extends StatefulWidget{ } 2.State를 상속받은 클래스를 만든다. class AppState extends State{ int counter = 0; Widget build(context){ return MaterialApp( ... ) } } 3.createState 함수를 StatefulState 클래스에 정의를 한다. @override State createState(){ return AppState(); } Stateful Widget Lifecycle SatefulWidget을 만들때 state라는 오브젝트를 ..

Flutter & Dart 2022.10.22

Flutter 비동기 작업 Future

Future 비동기 작업의 결과를 나타내며 미완료(value를 생성하기 전)또는 완료(value 생성)의 두 가지 상태를 가질 수 있습니다. -미완성 비동기 함수를 호출하면 완료되지 않은 미래가 반환됩니다. 미래에는 함수의 비동기 작업이 완료되거나 오류가 발생하기를 기다리고 있습니다. -완료 비동기 작업이 성공하면 미래는 값으로 완료됩니다. 그렇지 않으면 오류와 함께 완료됩니다. -값으로 완성 유형의 미래는 유형 Future값으로 완료됩니다. -오류와 함께 완료 함수가 수행하는 비동기 작업이 어떤 이유로 든 실패 하면 미래는 오류와 함께 완료됩니다. 비동기 작업 -네트워크를 통해 데이터를 가져오는중 -데이터베이스에 쓰기 -파일에서 데이터를 읽습니다. Dart에서는 비동기 작업을 수행하기 위해 Future..

Flutter & Dart 2022.10.22

Fluetter Ble 통신

https://medium.com/flutter-community/flutter-for-bluetooth-devices-5594f105b146 Flutter for Bluetooth devices How to connect your BLE devices to the flutter app and actually do something. medium.com Ble 사용 https://blog.naver.com/chandong83/221897652401 플러터(Flutter) - BLE 사용하기 #1- 라이브러리 추가 및 SCAN 기능 구현 Flutter에서 BLE(bluetooth low energy)를 구현하기 위해 아래와 같은 라이브러리를 사용한다. flutter... blog.naver.com

Flutter & Dart 2022.10.22

Flutter - Layout a widget & Row, Column 정렬하기

1.layout widget을 선택한다. 2.위젯을 생성한다. Text('hello world'), Image.asset( 'images/lake.jpg', fit: BoxFit.cover, ), Icon( Icons.start, color: Colors.red[500], ), 3.위젯에 layout위젯을 추가한다. 모든 레이아웃은 다음중 하나가 있다. -child: 하나의 자식을 받는 것(Container, Center) -children: 위젯 목록을 받는 것(Row, Column, ListView, Stack) Center( child: Text('hello world'), ), 4.페이지에 layout 위젯 추가하기 Flutter 앱 자체는 위젯이고 대부분의 위젯에는 build 메서드가 존재한다...

Flutter & Dart 2022.10.22

Flutter - 레이아웃 구성

1단계 - 코드 기반의 앱을 생성 import 'package:flutter/material.dart'; //MyApp을 시작 위젯으로 설정하여 앱을 실행 void main() => runApp(MyApp()); //앱의 시작점에 해당하는 위젯 class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ //Material앱을 생성하여 반환 return MaterialApp( title: 'Flutter Layout Demo', //앱의 타이틀 theme: ThemeData( //앱의 테마 설정 primarySwatch: Colors.red, //주요 테마 색상 ), //홈 설정, 홈은 Material앱의 시작점 ho..

Flutter & Dart 2022.10.22