앱 개발 입문 수강 기록 5일 차_2023-02-24

강좌명

CH01_06. 여러 위젯 같이 써보기 (가로, 세로로 다양한 위젯 배치)

1. Row, Column, ListView, ListTile
   1. Row
      1. 가로로 여러 위젯을 배치할 때 사용하는 위젯
   2. Column
      1. 세로로 여러 위젯을 배치할 때 사용하는 위젯
   3. Expanded
      1. Column, Row 위젯 안에서 영역을 전체로 확장할 때 사용하는 위젯
   4. ListView
      1. 여러 위젯을 나열할 때 사용하는 위젯
      2. Column과 Row와는 달리 스크롤이 가능한 위젯
      3. 스크롤 방향을 설정할 수 있음
   5. ListTile
      1. ListView에서 사용하는 기본 위젯
   6. GridView
      1. 여러 위젯을 나열할 때 사용하는 위젯
      2. Column과 Row를 포함한 스크롤 가능한 위젯
      3. 휴대폰 갤러리 UI와 같은 Grid Layout 위젯

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("패스트캠퍼스 테스트"),
      ),
      body: Center(
        child: GridView.count(
          crossAxisCount: 2,
          childAspectRatio: 1,
          children: <Widget>[
            Text("이름"),
            Text("이름"),
            Text("이름"),
            ListTile(
              title: Text("이름"),
              trailing: Text("ntts"),
              onTap: () {
                print("ntts9990");
              },
            )
          ],
        ),
      ),
    );
  }
}

1. InkWell, GestureDetector
   1. InkWell
      1. 위젯을 클릭 가능하도록 만드는 위젯
   2. GestureDetector
      1. 위젯을 클릭 가능하도록 만드는 위젯
   3. 클릭(onTap), 길게 클릭(onLongPress) 사용 가능
   4. 버튼이 아닌 다른 위젯을 클릭 가능하도록 감싸는 위젯

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("패스트캠퍼스 테스트"),
      ),
      body: Center(
        child: GridView.count(
          crossAxisCount: 2,
          childAspectRatio: 1,
          children: <Widget>[
            InkWell(child: Text("클릭되는 모션 있음"),
                onTap: (){
                  print("InkWell 클릭됨");
                  },
                ),
            GestureDetector(child: Text("클릭되는 모션 없음"),
            onTap: (){
              print("GestureDetector 클릭됨");
            },
            ),
            Text("이름"),
            Text("이름"),
            Text("이름"),
            ListTile(
              title: Text("이름"),
              trailing: Text("ntts"),
              onTap: () {
                print("ntts9990");
              },
            )
          ],
        ),
      ),
    );
  }
}

1. margin, padding
   1. Margin
      1. 위젯 외부 여백
   2. Padding
      1. 위젯 내부 여백
   3. EdgeInsets
      1. 여백 추가 위젯

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("패스트캠퍼스 테스트"),
      ),
      body: Center(
        child: GridView.count(
          crossAxisCount: 2,
          childAspectRatio: 1,
          children: <Widget>[
            Container(child: Text("이름"),
              margin: EdgeInsets.all(16),
              padding: EdgeInsets.all(16),
              color: Colors.blueGrey,
            ),
            Text("이름"),
            Text("이름"),
            Text("이름"),
            ListTile(
              title: Text("이름"),
              trailing: Text("ntts"),
              onTap: () {
                print("ntts9990");
              },
            )
          ],
        ),
      ),
    );
  }
}

1. 정리
   1. 괄호들 맞추는 게 어려웠...지만 Android Studio에서 Expected to find '}' 등으로 알려줘서 편해졌다.
      1. 들여쓰기도 자동으로 해주고 주석(실제 작성한 건 아니고 표시만 되어 있음)도 자동으로 달아줘서 다행이야...

 

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지
#직장인인강 #직장인자기계발 #패캠인강후기 #패스트캠퍼스후기
#환급챌린지 #오공완 #누적다운로드120만1인개발자와함께하는앱개발입문Online
http://bit.ly/3Y34pE0

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.