video3 _ default code 변경해서 응용앱 만들기

얘를 만들어볼거임

import 'package:flutter/material.dart';

void main() {
  runApp(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: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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


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>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

default source code

1. Button to click

2. Function that reduces _counter by 1

 

Decrement button을 만들었다.

Row(
  children: [
    ElevatedButton(onPressed: _decrementCounter, child: const Text('Decrement')),
    ElevatedButton(onPressed: _incrementCounter, child: const Text('Increment')),
  ],
),

Row로 버튼 두개를 넣어주면 요따구로 뜬다.

mainAxisAlignment 속성을 이용해 이쁘게 정렬해보도록 하겠다.

 

mainAxisAlignment: MainAxisAlignment.center

mainAxisAlignment: MainAxisAlignment.center

center 로 하면 이렇게 되고

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

spaceEvenly를 쓰면 요래된다.

 

이제 reset button을 만들어보자.

+버튼을 refresh 버튼으로 바꿔볼거다

 

 

먼저 아이콘 타입을 refresh로 바꿔줬다.

해주면 아주 잘 작동한다.

 

마지막으로

이미지넣기!

1. Copy image to lib folder in Flutter project

2. Register image in pubspec.yaml file

 

1. lib 폴더 안에 image 폴더를 만든 뒤 그 안에 이미지를 넣어줌

2. pubspec.yaml 을 열어서 55줄에 있는 flutter를 찾아 asset 안에 이미지 파일명 입력

 

 

main.dart로 가면 위에 황토색 창이 뜨는데

ignore눌러주면 된다.

 

이제 이미지 위젯을 이용해 사진을 넣어보자.

성공 ><

그림이랑 글씨랑 너무 붙어있으니까 답답하다

container 위젯을 이용해 좀 띄워보도록 하겠다

container 위젯 안에서는  margin과 padding을 설정할 수 있다.

 

 

시 - 원

BoxDecoration을 이용해 영롱한 파란색도 채워보겠다.

Container(
  margin: EdgeInsets.only(bottom: 100.0),
  padding: EdgeInsets.all(8.0),
  decoration: BoxDecoration(
    color: Colors.blue.withOpacity(0.25),
    borderRadius: BorderRadius.circular(4.0),
  ),
  child: Image.asset(
    'flutter_image.png',
    width:100.0,
  ),
),

withOpacity안에 오는 숫자는 색깔 농도를 나타내는 듯 하다.

circular 안에 오는 숫자를 키웠더니 container가 더 동글동글해졌다.

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: MyHomePage(title: 'Hot Reload Demo'),
    );
  }
}

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

  final String title;

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


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

  void _resetCounter() {
    setState((){
      _counter = 0;
    });
  }

  void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }

  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>[
            Container(
              margin: EdgeInsets.only(bottom: 100.0),
              padding: EdgeInsets.all(8.0),
              decoration: BoxDecoration(
                color: Colors.blue.withOpacity(0.25),
                borderRadius: BorderRadius.circular(9.0),
              ),
              child: Image.asset(
                'flutter_image.png',
                width:100.0,
              ),
            ),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(onPressed: _decrementCounter, child: const Text('Decrement')),
                ElevatedButton(onPressed: _incrementCounter, child: const Text('Increment')),
              ],
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _resetCounter,
        tooltip: 'reset',
        child: Icon(Icons.refresh),
      ),
    );
  }
}

 

모앱 중간고사 d-6

미리미리 정리좀 해놨어야 했는데 이러고 있다 ㅋㅎㅋㅎ