Flutter (1 : 메모장)

플러터 기본 템플릿

@override
  Widget build(BuildContext context) {
    return MaterialApp(

• 위 코드는 구글에서 제공하는 기본템플릿이며 사용 방법이다

• 아래 Scaffold를 사용하여 레이아웃을 설정하면 Scaffold아래 appbar, navigation bar등을 사용할 수 있게 된다.

Appbar

appBar: AppBar(
          title: Text('Memo'),
          backgroundColor: Colors.amber,
          actions: [
            TextButton(
                onPressed: (){
                  print('클릭');
            },
              child: Text('버튼'),)
          ],
         ),

• 앱 상단에 appbar가 생기며 눌렀을때 onpressed 를 거쳐 누르면 반응하는 버튼을 만들 수 있다.

결과물

• 클릭시 > console 창에 누른 버튼의 작동명이 뜬다.
  

body : ListView.builder(
          itemCount: items.length,
            itemBuilder: (context, index){
          return ListTile(
            title: Text(items[index]),
            tileColor: Colors.amber[100],
            trailing: IconButton(
                onPressed: (){
                  print('삭제: Memo $index');
                },
                icon: Icon(Icons.delete)),
          );
        })

• list view builder를 통해 전체적인 레이아웃을 생성한다

• itemCount : ~ > 화면상 appbar아래에 생성되는 객채의 갯수
  (~~~ 에 고정숫자(10) , 배열 (items.length) , for문 ? 을 넣을 수 있다)

• trailing : IconButton > 버튼을 생성하며 onPressed로 실행 동작을 지정해 줄 수 있다.