[사전캠프] Flutter UI 배우기

Flutter 프로젝트 생성 및 기본 구조 이해

flutter crate my_flutter_app으로 프로젝트 생성 완료

cd my_flutter_app으로 프로젝트 경로로 들어가 lib/main.dart 파일 실행 완료

Text, Container 위젯

Text

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
            child: Text(
          "안녕하세요, Flutter!",
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: Colors.blue,
          ),
        )),
      ),
    );
  }
}

Container

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: Container(
          width: 200,
          height: 100,
          color: Colors.amber,
          child: Text("컨테이너 안의 텍스트"),
        )),
      ),
    );
  }
}

실습

코드 및 실행결과

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: Container(
          width: 200,
          height: 100,
          color: Colors.yellow,
          child: Text("Flutter를 배우고 있어요!"),
        )),
      ),
    );
  }
}

Column, Row 위젯

Column

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("첫 번째 줄"),
            Text("두 번째 줄"),
          ],
        )),
      ),
    );
  }
}

Row

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text("왼쪽"),
            Text("가운데"),
            Text("오른쪽"),
          ],
        )),
      ),
    );
  }
}

실습

코드 및 실행결과

1번

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("하나"),
            Text("둘"),
            Text("셋"),
          ],
        )),
      ),
    );
  }
}

2번

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [Icon(Icons.star), Icon(Icons.star), Icon(Icons.star)],
        )),
      ),
    );
  }
}

Image, Icon 위젯

로컬 이미지

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: Image.asset("assets/my_image.png")),
      ),
    );
  }
}

인터넷 이미지

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: Image.network("https://picsum.photos/600/400")),
      ),
    );
  }
}

네트워크 주소는 수정

Icon

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: Icon(
          Icons.favorite,
          size: 50,
          color: Colors.red,
        )),
      ),
    );
  }
}

실습

1번

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: Image.network("https://picsum.photos/id/237/200/300")),
      ),
    );
  }
}

2번

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: Icon(
          Icons.favorite,
          size: 50,
          color: Colors.red,
        )),
      ),
    );
  }
}

버튼 추가하기

버튼 생성

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: ElevatedButton(
          onPressed: () {
            print("버튼 클릭됨!");
          },
          child: Text("눌러보세요"),
        )),
      ),
    );
  }
}

실습

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: ElevatedButton(
          onPressed: () {
            print("버튼이 눌렸습니다!");
          },
          child: Text("눌러보세요"),
        )),
      ),
    );
  }
}

추가 학습 1: 사용자 입력 및 화면 업데이트 구현하기

TextField 위젯

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: TextField(
          decoration: InputDecoration(
            labelText: "이름을 입력하세요",
            border: OutlineInputBorder(),
          ),
        )),
      ),
    );
  }
}

실습

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  _MainAppState createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  final TextEditingController _controller = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Example'),
        ),
        body: Center(
            child: Column(
          children: [
            TextField(
              controller: _controller,
              onChanged: (value) => setState(() {}),
              decoration: InputDecoration(
                labelText: "사용자 이름 입력",
                border: OutlineInputBorder(),
              ),
            ),
            Text(_controller.text)
          ],
        )),
      ),
    );
  }
}

setState()란?

flutter에서 화면을 변경하려면 반드시 setState()를 사용해야 합니다.
setState()를 호출하면 Flutter가 화면을 다시 그려 변경 사항을 반영합니다.

실습

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  _MainAppState createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  int value = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Example'),
        ),
        body: Center(
            child: Column(
          children: [
            Text(value.toString()),
            ElevatedButton(
                onPressed: () {
                  setState(() {
                    value++;
                  });
                },
                child: const Text('증가 버튼'))
          ],
        )),
      ),
    );
  }
}