음악명은 최대 2줄까지만 가능하다. 가수명과 플레이시간은 최대 1줄까지만 가능하며 필요한 경우 가수명을 줄인다 음악의 정보를 보여주는 위젯을 만들고, 이름은 MusicTile로 한다

import 'package:flutter/material.dart';

import 'MusciTile.dart';

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

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

@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( backgroundColor: Colors.black, leading: Icon( color: Colors.white, size: 15, Icons.arrow_back_ios), title: Text(style: TextStyle(color: Colors.white),'아워리스트'),
actions: [ Padding( padding: const EdgeInsets.all(8.0), child: Icon(color: Colors.white,Icons.tv), ), Padding( padding: const EdgeInsets.all(8.0), child: Icon(color: Colors.white, Icons.search), ) ], shadowColor: Colors.grey, elevation: 2,
), body: ListView( children: [ MusicTile( ImageUrl: 'assets/music_come_with_me.png', name: 'Come with me', subtitle: 'Surfaces 및 salem ilese · 3:00 ' ), MusicTile( ImageUrl: 'assets/music_good_day.png', name: 'Good day', subtitle: 'Surfaces · 3:00' ), MusicTile( ImageUrl: 'assets/music_honesty.png', name: 'Honesty', subtitle: 'Pink Sweat$ · 3:09' ), MusicTile( ImageUrl: 'assets/music_i_wish_i_missed_my_ex.png', name: 'I Wish I Missed My Ex', subtitle: ' 마할리아 버크마 · 3:24' ), MusicTile( ImageUrl: 'assets/music_plastic_plants.png', name: 'Plastic Plants', subtitle: '마할리아 버크마 · 3:20' ), MusicTile( ImageUrl: 'assets/music_sucker_for_you.png', name: 'Sucker for you', subtitle: '맷 테리 · 3:00' ), MusicTile( ImageUrl: 'assets/music_summer_is_for_falling_in_love.png', name: 'Summer is for falling in love', subtitle: 'Sarah Kang & Eye Love Brandon · 3:00' ), MusicTile( ImageUrl: 'assets/music_these_days.png', name: 'These days(feat. Jess Glynne, Macklemore & Dan Caplen)', subtitle: 'Rudimental · 3:00' ), MusicTile( ImageUrl: 'assets/music_you_make_me.png', name: 'You Make Me', subtitle: 'DAY6 · 3:00' ), MusicTile( ImageUrl: 'assets/music_zombie_pop.png', name: 'Zombie Pop' , subtitle: 'DRP IAN · 3:00' ),
] ), bottomSheet: ListTile( tileColor: Colors.grey[900], leading: Image.asset('assets/music_you_make_me.png'), title: Text('You Make Me', style: TextStyle(color: Colors.white)), subtitle: Text('DAY6', style: TextStyle(color: Colors.grey)), trailing : Row( mainAxisSize: MainAxisSize.min, children: [ Icon(Icons.play_arrow, color: Colors.white), SizedBox(width: 8,), Icon(Icons.skip_next, color: Colors.white), ], ), shape: Border(bottom: BorderSide(color: Colors.white)),
), bottomNavigationBar: BottomNavigationBar( unselectedItemColor: Colors.grey, selectedItemColor: Colors.grey, backgroundColor: Colors.grey[900], items: [ BottomNavigationBarItem( icon: Icon(Icons.home), label: '홈'), BottomNavigationBarItem( icon: Icon(Icons.search), label: '둘러보기'), BottomNavigationBarItem( icon: Icon(Icons.library_music_sharp), label: '보관함') ], ), ) ); } }

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

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

@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( backgroundColor: Colors.transparent, elevation: 0, leading: Icon( Icons.arrow_back_ios, size: 15, color: Colors.black, ), actions: [ Padding( padding: const EdgeInsets.all(8.0), child: Icon( Icons.search, color: Colors.black, ), ), ], ), body: Padding( padding: EdgeInsets.all(16.0), child: ListView( children: [ Text( 'NEW', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold), ), DrinkTile( title: '골든 미모사 그린 티', subtitle: 'Golden Mimosa Green Tea', price: 6100, imgUrl: 'assets/images/item_drink1.jpeg'), DrinkTile( title: '블랙 햅쌀 고봉 라떼', subtitle: 'Black Rice Latte', price: 6300, imgUrl: 'assets/images/item_drink2.jpeg'), DrinkTile( title: '아이스 블랙 햅쌀 고봉 라떼', subtitle: 'Iced Black Rice Latte', price: 6300, imgUrl: 'assets/images/item_drink3.jpeg'), DrinkTile( title: '스타벅스 튜메릭 라떼', subtitle: 'Starbucks Turmeric Latte', price: 6100, imgUrl: 'assets/images/item_drink4.jpeg'), DrinkTile( title: '아이스 스타벅스 튜메릭 라떼', subtitle: 'Iced Starbucks Turmeric Latte', price: 6100, imgUrl: 'assets/images/item_drink5.jpeg'), ], ), ), bottomNavigationBar: BottomNavigationBar( type: BottomNavigationBarType.fixed, currentIndex: 2, fixedColor: Colors.green, items: [ BottomNavigationBarItem(icon: Icon(Icons.home), label: '홈'), BottomNavigationBarItem(icon: Icon(Icons.payment), label: 'Pay'), BottomNavigationBarItem(icon: Icon(Icons.coffee), label: 'Order'), BottomNavigationBarItem(icon: Icon(Icons.shop), label: 'Shop'), BottomNavigationBarItem( icon: Icon(Icons.more_horiz), label: 'Other') ]), bottomSheet: Container( height: 64, color: Colors.black, child: Padding( padding: const EdgeInsets.all(15), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( style: TextStyle(color: Colors.white), '주문할 매장을 선택해 주세요.'), Icon(color: Colors.white, Icons.expand_more) ], ), )), ), ); } }

import 'package:flutter/material.dart';

class DrinkTile extends StatelessWidget { const DrinkTile({ super.key, required this.title, required this.subtitle, required this.price, required this.imgUrl, });

final String title; final String subtitle; final int price; final String imgUrl;

@override Widget build(BuildContext context) { return Container( margin: EdgeInsets.only(bottom: 8), child: Row( children: [ CircleAvatar( backgroundImage: AssetImage(imgUrl), radius: 48, ), SizedBox( width: 15, ), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( title, style: TextStyle(fontWeight: FontWeight.bold), ), Text( subtitle, style: TextStyle(fontWeight: FontWeight.w200, color: Colors.grey), ), SizedBox( height: 10, ), Text( '$price원', style: TextStyle(fontWeight: FontWeight.bold), ) ], ) ], ), ); } }

개발: MySQL은 Sun Microsystems(현재 Oracle)에서 개발되었습니다. 반면에 MariaDB는 MySQL의 창시자 중 한 명인 Michael Widenius가 MySQL을 인수하기 전에 만든 포크(fork) 버전입니다.

라이선스: MariaDB는 GPL, LGPL 및 BSD와 같은 여러 라이선스로 제공됩니다. 반면에 MySQL은 GPL과 상용 라이선스를 사용합니다.

스토리지 엔진: MariaDB는 일부 엔진을 MySQL에서 제거하고 자체 엔진을 추가하여 성능을 개선했습니다. 또한 MariaDB에는 MySQL에는 없는 스토리지 엔진이 포함되어 있습니다.

기능: MariaDB는 MySQL보다 더 많은 기능을 제공합니다. 예를 들어, MariaDB는 JSON, XML, GIS 및 열 저장소 열 지향 스토리지 엔진을 지원합니다.

퍼포먼스: MariaDB는 MySQL보다 더 나은 퍼포먼스를 제공합니다. 특히, MariaDB는 InnoDB 스토리지 엔진을 개선하여 더 빠른 쿼리 실행 및 트랜잭션 처리를 지원합니다.

커뮤니티: MariaDB는 MySQL과 달리 더 개방적이고 활발한 커뮤니티를 가지고 있습니다. 이 커뮤니티는 MariaDB의 개발에 기여하고 사용자들의 문제를 해결하는 등 다양한 방법으로 도움을 제공합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);

@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(), drawer: Drawer( child: ListView( padding: EdgeInsets.all(5), children: [ Container( decoration: BoxDecoration(border: Border(bottom: BorderSide())), child: ListTile( leading: CircleAvatar( child: CircleAvatar(backgroundColor: Colors.green), ), title: Text('스나이퍼팩토리'), subtitle: Text('안녕하세요, 스팩입니다'), ), ), ListTile(title: Text('홈'), subtitle: Text('홈으로 이동하기')), ListTile(title: Text('커뮤니티'), subtitle: Text('커뮤니티로 이동하기')), SizedBox( height: 500, ), ListTile( title: Text('로그아웃'), subtitle: Text('로그아웃합니다.'), trailing: Icon(Icons.logout), ), ], ), ), )); } }

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);

@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( bottomNavigationBar: BottomNavigationBar( type: BottomNavigationBarType.fixed, //네비게이션 타입 selectedItemColor: Colors.pink, items: [ BottomNavigationBarItem( icon: Icon(Icons.home), label: '홈', ), BottomNavigationBarItem( icon: Icon(Icons.people), label: '친구', ), BottomNavigationBarItem( icon: Icon(Icons.video_call), label: 'Watch', ), BottomNavigationBarItem( icon: Icon(Icons.verified_user), label: '프로필', ), BottomNavigationBarItem( icon: Icon(Icons.notifications), label: '알림', ), BottomNavigationBarItem( icon: Icon(Icons.circle), label: '메뉴', ), ], ), )); } }

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);

@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( floatingActionButton: FloatingActionButton.extended( backgroundColor: Colors.pink, label: Text('지금 예약하기'), onPressed: () {}, ), floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, bottomNavigationBar: BottomNavigationBar( type: BottomNavigationBarType.fixed, selectedItemColor: Colors.blue,

      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: '홈',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.block),
          label: '차단',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.settings),
          label: '설정',
        )
      ],
    ),
  ),
);

} }

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);

@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Column( children: [ Container( width: 500, height: 200, decoration: BoxDecoration( image: DecorationImage( image: NetworkImage('https://picsum.photos/400/500'), fit: BoxFit.cover)), child: Text( style: TextStyle( color: Colors.white, fontSize: 25, fontWeight: FontWeight.bold), 'CGB (영화 예매)'), ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( style: TextStyle( fontSize: 24, fontWeight: FontWeight.bold, ), '속초 여행을 떠나면서'), Row( children: [ Icon(Icons.remove_red_eye), Text('232회'), SizedBox( width: 10, ) ], ) ], ), SizedBox( height: 10, ), Container( width: 400, height: 100, decoration: BoxDecoration(border: Border(bottom: BorderSide(width: 0.5))), child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ SizedBox( width: 10, ), CircleAvatar( radius: 20, backgroundImage: NetworkImage('https://picsum.photos/50/50'), ), SizedBox( width: 10, ), Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('''오류동 멋쟁이 스나이퍼팩토리 누군가''') ], ), SizedBox( width: 100, ), Text('3시간전'), ], ), ), SizedBox( height: 100, ), Text( style: TextStyle(fontSize: 13), '방지하는 열락의 끓는 일월과 풀이 그러므로 고행을 청춘의 현저하게 봄바람이다. 전인 수 구하지 석가는 따뜻한 트고, 보라. 있음으로써 광야에서 그들의 뛰노는 기관과 봄바람이다. 것은 피가 우리 그들은 이것이야말로 있음으로써 사랑의 주는 있는 것이다. 그들은 이상 이는 교향악이다. 같이, 청춘의 하는 이성은 청춘에서만 청춘의 품고 것이다. 보는 많이 얼마나 황금시대의 피부가 인간에 운다. 사랑의 그들의 과실이 우는 이상이 인생에 보라. 옷을 수 쓸쓸한 지혜는 꾸며 이상은 이 반짝이는 것이다. 생명을 풍부하게 소리다.이것은 구하지 품에 가치를 새가 황금시대다.'), ], ), )), ); } }

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

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

@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Column( children: [ Column( children: [ Text('A'), Text('B'), Text('C'), Text('D'), ], ), ], ), ), ), ); } }

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( home: Scaffold( body: SafeArea( child: Column( children: [ Column( children: [ Text('A'), Text('B'), Icon(Icons.add), Text('C'), Icon(Icons.home), Text('D'), ], ), ], ), ), ), ); } }

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( home: Scaffold( body: SafeArea( child: Column(children: [ Row( children: [ Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), ], ), Row( children: [ Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), ], ), Row( children: [ Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), ], ), Row( children: [ Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), ], ), Row( children: [ Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), ], ), Row( children: [ Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), ], ), Row( children: [ Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), ], ), ]), ), ), ); } }

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( home: Scaffold( body: SafeArea( child: Row( children: [ Column( children: [ Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle, color: Colors.red), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), ], ), Column( children: [ Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle, color: Colors.orange), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), ], ), Column( children: [ Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle, color: Colors.yellow), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), ], ), Column( children: [ Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle, color: Colors.green), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), ], ), Column( children: [ Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle, color: Colors.blue), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), ], ), Column( children: [ Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle, color: Colors.indigo), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), ], ), Column( children: [ Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle, color: Colors.purple), Icon(Icons.circle), Icon(Icons.circle), Icon(Icons.circle), ], ), ], ), ), ), ); } }

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( home: Scaffold( body: SafeArea( child: Column( children: [ Row( children: [ Icon(Icons.circle, color: Colors.red), Icon(Icons.circle, color: Colors.orange), Icon(Icons.circle, color: Colors.yellow), Icon(Icons.circle, color: Colors.green), Icon(Icons.circle, color: Colors.blue), Icon(Icons.circle, color: Colors.indigo), Icon(Icons.circle, color: Colors.purple), ], ), Row( children: [ Icon(Icons.circle, color: Colors.red), Icon(Icons.circle, color: Colors.orange), Icon(Icons.circle, color: Colors.yellow), Icon(Icons.circle, color: Colors.green), Icon(Icons.circle, color: Colors.blue), Icon(Icons.circle, color: Colors.indigo), Icon(Icons.circle, color: Colors.purple), ], ), Row( children: [ Icon(Icons.circle, color: Colors.red), Icon(Icons.circle, color: Colors.orange), Icon(Icons.circle, color: Colors.yellow), Icon(Icons.circle, color: Colors.green), Icon(Icons.circle, color: Colors.blue), Icon(Icons.circle, color: Colors.indigo), Icon(Icons.circle, color: Colors.purple), ], ), Row( children: [ Icon(Icons.circle, color: Colors.red), Icon(Icons.circle, color: Colors.orange), Icon(Icons.circle, color: Colors.yellow), Icon(Icons.circle, color: Colors.green), Icon(Icons.circle, color: Colors.blue), Icon(Icons.circle, color: Colors.indigo), Icon(Icons.circle, color: Colors.purple), ], ), Row( children: [ Icon(Icons.circle, color: Colors.red), Icon(Icons.circle, color: Colors.orange), Icon(Icons.circle, color: Colors.yellow), Icon(Icons.circle, color: Colors.green), Icon(Icons.circle, color: Colors.blue), Icon(Icons.circle, color: Colors.indigo), Icon(Icons.circle, color: Colors.purple), ], ), Row( children: [ Icon(Icons.circle, color: Colors.red), Icon(Icons.circle, color: Colors.orange), Icon(Icons.circle, color: Colors.yellow), Icon(Icons.circle, color: Colors.green), Icon(Icons.circle, color: Colors.blue), Icon(Icons.circle, color: Colors.indigo), Icon(Icons.circle, color: Colors.purple), ], ), Row( children: [ Icon(Icons.circle, color: Colors.red), Icon(Icons.circle, color: Colors.orange), Icon(Icons.circle, color: Colors.yellow), Icon(Icons.circle, color: Colors.green), Icon(Icons.circle, color: Colors.blue), Icon(Icons.circle, color: Colors.indigo), Icon(Icons.circle, color: Colors.purple), ], ), ], ), ), ), ); } }

localhost: 로컬호스트는 자신의 컴퓨터를 가리키는 호스트 이름입니다. 예를 들어, 브라우저에서 "localhost:8000"과 같이 입력하면 자신의 컴퓨터에서 실행 중인 로컬 웹 서버의 8000번 포트에 접속할 수 있습니다

PageView나 ListView는 유저의 행동에 따라서 작동되는데 유저의 행동을 제한하고 싶으면 어떤 속성 값을 설정해야하는지... 이거는 이해가 어려운운데 잘모르겠습니다;

ListView 위젯 안에 다른 ListView 위젯이 중첩되어 있습니다 Flutter에서는 ListView 위젯 안에 또 다른 ListView 위젯을 넣을 수 없습니다

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(), ); } }

class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: SingleChildScrollView( scrollDirection: Axis.horizontal, child: Container( width: 1000, decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.centerLeft, end: Alignment.centerRight, colors: [ Colors.red, Colors.orange, Colors.yellow, Colors.green, Colors.blue, Colors.purple, ], )), ), ), ); }

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '오늘의 하루는',
              style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
            ),
            Text(
              '어땠나요?',
              style: TextStyle(
                fontSize: 20,
                color: Colors.grey,
              ),
            ),
            SizedBox(
              height: 200,
              child: PageView(
                scrollDirection: Axis.horizontal,
                children: [
                  Container(
                    width: 300,
                    height: 200,
                    decoration: BoxDecoration(
                      color: Color.fromARGB(255, 54, 244, 152),
                      gradient: LinearGradient(
                        colors: [
                          Color.fromARGB(255, 42, 184, 99),
                          Color.fromARGB(255, 54, 244, 152),
                        ],
                        begin: Alignment.centerLeft,
                        end: Alignment.centerRight,
                      ),
                    ),
                    child: Center(
                      child: Text(
                        '상쾌함',
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 24,
                        ),
                      ),
                    ),
                  ),
                  Container(
                    width: 300,
                    height: 200,
                    decoration: BoxDecoration(
                      color: Color.fromARGB(255, 255, 178, 63),
                      gradient: LinearGradient(
                        colors: [
                          Color.fromARGB(255, 255, 172, 29),
                          Color.fromARGB(255, 251, 255, 129),
                        ],
                        begin: Alignment.centerLeft,
                        end: Alignment.centerRight,
                      ),
                    ),
                    child: Center(
                      child: Text(
                        '행복함',
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 24,
                        ),
                      ),
                    ),
                  ),
                  Container(
                    width: 300,
                    height: 200,
                    color: Colors.grey,
                    child: Center(
                      child: Text(
                        '우울함',
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 24,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

상대경로는 현재 작업 중인 디렉토리를 기준으로 경로를 표시합니다 절대경로는 파일이나 디렉토리의 전체 경로를 표시합니다

Row위젯, Column위젯 mainAxisAlignment, crossAxisAlignment, mainAxisSize 속성:

mainAxisAlignment: 자식 위젯들을 주 축(main axis)을 기준으로 정렬하는 속성입니다.

• MainAxisAlignment.start: 기본값으로, 주 축의 시작 부분에 자식 위젯들이 정렬됩니다. MainAxisAlignment.center: 주 축의 중앙 부분에 자식 위젯들이 정렬됩니다. MainAxisAlignment.end: 주 축의 끝 부분에 자식 위젯들이 정렬됩니다. MainAxisAlignment.spaceBetween: 자식 위젯들 사이에 동일한 간격이 유지되도록 정렬됩니다. MainAxisAlignment.spaceEvenly: 자식 위젯들 앞, 뒤, 사이에 동일한 간격이 유지되도록 정렬됩니다. MainAxisAlignment.spaceAround: 첫 번째 자식 위젯과 마지막 자식 위젯 사이에는 반 간격이 적용되고, 중간 자식 위젯들은 동일한 간격으로 정렬됩니다.

crossAxisAlignment: 주 축과 수직축(cross axis)을 기준으로 자식 위젯들을 정렬하는 속성입니다.

• CrossAxisAlignment.start: 수직 축의 시작 부분에 자식 위젯들이 정렬됩니다. CrossAxisAlignment.center: 수직 축의 중앙 부분에 자식 위젯들이 정렬됩니다. CrossAxisAlignment.end: 수직 축의 끝 부분에 자식 위젯들이 정렬됩니다. CrossAxisAlignment.stretch: 수직 축의 크기를 늘리고, 자식 위젯들이 수직 축 전체에 맞게 확장됩니다. CrossAxisAlignment.baseline: 자식 위젯들의 텍스트 기준선에 맞춰 정렬됩니다.

mainAxisSize: 주 축의 길이를 얼마나 사용할 것인지를 결정하는 속성입니다.

• MainAxisSize.max: 최대한의 길이를 사용하여 주 축의 전체 공간을 채우려고 시도합니다. MainAxisSize.min: 필요한 만큼만 주 축의 공간을 사용합니다.

3. 아래의 이미지와 동일한 결과물을 만들고, 이를 만들기 위한 전체 코드를 작성하세요. (그라디언트 색은 5개 이상, 색상 자유)

   import 'package:flutter/material.dart';
   

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

class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);

@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Container( height: 200, width: 200, decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [
Colors.red, Colors.orange, Colors.yellow, Colors.green, Colors.blue, Colors.purple, ], ), ), ), ), ), ); } }

2.아래의 이미지와 동일한 결과물을 만들고, 이를 만들기 위한 전체 코드를 작성하세요. 
(그라디언트 색상 2개 이상, 색상 자유)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);

@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Container( height: 250, width: 250, decoration: BoxDecoration( borderRadius: BorderRadius.only( topLeft: Radius.circular(80), topRight: Radius.circular(0), bottomLeft: Radius.circular(0), bottomRight: Radius.circular(80), ), gradient: LinearGradient( begin: Alignment.centerLeft, end: Alignment.centerRight, colors: [ Colors.blue, Colors.orange, ], ), ), child: Container( height: 10, width: 10, decoration: BoxDecoration( color: Colors.orange, borderRadius: BorderRadius.circular(100)), ), ), ), ), ); } } ```

1. Generic에 대해 정리하고 링크를 입력해주세요.

• 다트(Dart) 언어에서 Generic은 타입 파라미터(type parameter)를 사용하여, 코드의 재사용성과 타입 안정성을 개선하는 기능이다
• Generic은 컬렉션, 함수, 클래스 등에서 사용할 수 있다

2. Flutter의 렌더링 원리에 대해 정리하고 링크를 입력해주세요. Flutter의 렌더링 원리는 크게 다음과 같은 과정으로 이루어집니다.

• Widget 트리 생성 Flutter 애플리케이션은 위젯 트리로 구성됩니다. 위젯은 UI 구성 요소를 정의하며, 일반적으로 트리 구조로 구성됩니다. 위젯은 불변 객체로, 한 번 생성되면 수정될 수 없다

• 레이아웃 위젯 트리가 생성되면 Flutter는 해당 트리의 각 위젯에 대해 레이아웃을 수행합니다. 레이아웃은 각 위젯의 크기, 위치 및 레이아웃 제약 조건을 결정합니다. Flutter는 위젯의 레이아웃을 계산하기 위해 "flex" 레이아웃 알고리즘을 사용한다

• 그리기 레이아웃 단계 이후에는 Flutter가 Skia를 사용하여 화면에 위젯을 그립니다. 이 단계에서 Skia는 위젯의 레이아웃 정보를 사용하여 텍스트, 이미지, 도형 및 다른 그래픽 요소를 그린다

• 업데이트 위젯 트리의 상태가 변경되면 Flutter는 레이아웃 및 그리기 단계를 반복하여 변경된 위젯만 다시 그립니다. 이를 통해 애플리케이션의 성능을 향상시킬 수 있다

3-1. 하나의 Text 위젯으로만 완성해보세요. (최소 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(
      home: Scaffold(
        body: Center(
          child: Text("사랑을 다해 사랑을 하였노라고\n"
              "정작 해야 할 말이 남아 있었음을 알았을 때\n"
              "당신은 이미 남의 사람이 되어 있었다\n"
              "\n"
              "불러야 할 뜨거운 노래를 가슴으로 죽이고\n"
              "당신은 멀리 이루어지고 있었다\n"
              "\n"
              "하마 곱스런 눈 웃음이 사라지기 전\n"
              "두고두고 아름다움으로 잊어 달라지만\n"
              "남자에게서 여자란 기쁨 아니면 슬픔\n"
              "\n"
              "다섯 손가락 끝을 잘라 핏물 오선을 그려\n"
              "혼자라도 외롭지 않을 밤에 울어보리라\n"
              "\n"
              "울어서 멍든 눈흘김으로\n"
              "미워서 미워지도록 사랑하리라\n"
              "\n"
              "한 잔은 떠나버린 너를 위하여\n"
              "또 한 잔은 너와의 영원한 사랑을 위하여\n"
              "그리고 또 한 잔은 이미 초라해진 나를 위하여\n"
              "마지막 한 잔은 미리 알고 정하신 하나님을 위하여"),
        ),
      ),
    );
  }
}

3-2. 하나의 Text 위젯에 속성을 추가해서 완성해보세요. (색상, 크기 자유)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Text(
              "사랑을 다해 사랑을 하였노라고\n"
              "정작 해야 할 말이 남아 있었음을 알았을 때\n"
              "당신은 이미 남의 사람이 되어 있었다\n"
              "\n"
              "불러야 할 뜨거운 노래를 가슴으로 죽이고\n"
              "당신은 멀리 이루어지고 있었다\n"
              "\n"
              "하마 곱스런 눈 웃음이 사라지기 전\n"
              "두고두고 아름다움으로 잊어 달라지만\n"
              "남자에게서 여자란 기쁨 아니면 슬픔\n"
              "\n"
              "다섯 손가락 끝을 잘라 핏물 오선을 그려\n"
              "혼자라도 외롭지 않을 밤에 울어보리라\n"
              "\n"
              "울어서 멍든 눈흘김으로\n"
              "미워서 미워지도록 사랑하리라\n"
              "\n"
              "한 잔은 떠나버린 너를 위하여\n"
              "또 한 잔은 너와의 영원한 사랑을 위하여\n"
              "그리고 또 한 잔은 이미 초라해진 나를 위하여\n"
              "마지막 한 잔은 미리 알고 정하신 하나님을 위하여",
              style: TextStyle(color: Colors.purple))),
    );
  }
}

3-3. RichText 위젯을 사용하여 완성해보세요. (단, Text 위젯 사용불가, 색상 4가지 이상) Text 위젯은 사용불가인데, 이건 잘모르겠습니다 ㅠㅠ..

4. CircleAvatar 위젯을 사용하여 아래의 이미지와 동일한 결과물을 만들고, 이를 만들기 위한 전체 코드를 작성하세요.( 색상, 그림자 자유, 사용한 icon 이름 : ac_unit_rounded, )

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 200,
              height: 200,
              child: CircleAvatar(
                backgroundColor: Colors.blue[800],
                child: Icon(
                  Icons.ac_unit_rounded,
                  size: 100,
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  ));
}

void main() { var a = [1, 2, 3, 4, 5, 6]; var index = a.indexOf(4); print(index); }

답: 3

∴ indexOf(4)의 4의 숫자가 a가 몇번째 자리에 있는지 알려준다 indexOf는 일치하는 요소가 없으면 –1이 출력됨

==================================== void main() { var list = [1, 2, 3, 4, 5]; var elementsToAdd = [6, 7, 8]; list.insertAll(2, elementsToAdd); print(list);

답: [1, 2, 6, 7, 8, 3, 4, 5]

∴ insertAll()에서 2는 2의 위치 다음(2와3사이)에 elementsToAdd를 넣는다

==================================== void main() { List list1 = [0, 1, 2, 3, 4, 5, true, false]; List list2 = [];

list2.add(list1.contains(list1[list1.length-1])); list2.insertAll(0, ['a', 'b', 'c', 1, 2, 3]); list2.indexOf(true)-list2.indexOf(false); print(list2.indexOf(true)-list2.indexOf(false)); }

list2.add(list1.contains(list1[list1.length -1])) // list1에 요소가 8개가 있기 때문에 list1.length는 8이고 거기에 -1을 하니 7이 되겠죠 그러면 list1[7] 번째에 false가 포함되어있는가? 근데 list1에 false가 포함되어 있으니 list1.contains(false)의 값은 true가 되겠네요 따라서 list2.add(true) 가 되는 것이다

list2.insertAll(0, ['a', 'b', 'c', 1, 2, 3]); 0번째 index에 ['a', 'b', 'c', 1, 2, 3]를 삽입하면 전에 계산하여 원래 있던 true가 맨 뒤로 빠진다 ['a', 'b', 'c', 1, 2, 3, true] 이렇게 된다

list2.indexOf(true)-list2.indexOf(false); indexOf는 ()안의 값이 몇 번째 배열에 있는지 찾아줍니다 그러므로 (ture)의 값이 맨 뒤에 있는것이므로 6번째가 된다, 그리고 (false)는 없으므로 –1이 출력된다 따라서 6 - (-1)을 출력하면 7이 나옵니다

DNS(Domain Name System): 네트워크에서 도메인이나 호스트 이름을 숫자로 된 IP 주소로 해석해주는 TCP/IP 네트워크 서비스입니다.

HTTP 메서드(method)의 종류: GET, POST, PUT, DELETE, DEAD, OPTIONS, TRACE, CONNECT 등이 있습니다.

HTML과 XML : HTML(HyperText Markup Language)은 웹 페이지를 만드는 데 사용되는 마크업 언어입니다, XML(Extensible Markup Language)은 마크업 언어의 한 종류로, 데이터를 저장하고 전송하기 위해 사용된다고 합니다.

4-1.

void main() {
 int test = '테스트';
 print(test);
}

에러, 이유는 변수 test는 정수형으로 선언되었지만 '테스트'는 문자열로 할당했기 때문인것 같습니다

4-2.

void main() {
 var test = '테스트';
 print(test.runtimeType);
}

변수 test를 var로 선언하면 var는 변수의 데이터 타입이 자동으로 지정되게 하는것같습니다 변수에 할당된 값인 '테스트'는 문자열이므로, print(test.runtimeType); 은 데이터 타입을 출력되게 하는 것 같습니다 답은 String 인 것 같습니다

4-3.

void main() {
 var test = '303'+'101';
 print(test);
}

문자열끼리 더하기 때문에 사칙연산하지않으므로 303101 입니다

4-4.

void main() {
 var true = 'test';
 print(true);
}

에러, 그 이유는 변수명에 true라는 예약어가 쓰였기때문입니다

4-5.

void main() {
 print(true.runtimeType);
}

bool입니다 true(참)은 boolean데이터타입이기 때문입니다

4-6.

void main() {
 String const = 'test';
 print(const);
}

오류, 찾아보니, const도 예약어라고 합니다

4-7.

void main() {
 var value = '303808' != '303'+'8'+'08';
 print(value);
}

값이 303808과 303808('303'+'8'+'08')은 서로 다른가(!=) 라고 했을때 아니므로 false가 나옵니다

4-8.

void main() {
 List list1 = [1,2,3,4];
 List list2 = [5,6,7];
 list1.add(list2);
 print(list1);
}

리스트 문제에서.. 먼저, list1과 list2 두 개의 리스트가 생성되고 초기화됩니다 그리고 list1.add(list2) 코드를 실행하면, list2 리스트가 list1 리스트의 끝에 추가된다고 합니다. 그래서, list1 리스트의 요소는 [1, 2, 3, 4, [5, 6, 7]]가 되는 것 같습니다

4-9.

void main() {
 List list1 = [1,2,3,4];
 List list2 = [5,6,7];
 list1.addAll(list2);
 print(list1);
}

list1.addAll(list2) 코드는 list1 리스트에 list2 리스트의 모든 요소를 추가하는 것 같습니다 따라서, list1 (기준)에 list2를 넣어서 [1,2,3,4,5,6,7] 가 됩니다.

4-10.

void main() {
 List list1 = ['a','b','d'];
 list1.insert(2,'c');
 print(list1);
}

찾아보니 insert 메서드는 List 클래스에 정의된 메서드 중 하나로, 리스트에 새로운 요소를 지정한 인덱스에 삽입하는 역할을 합니다. 라고 되어있습니다..

list1.insert(2, 'c') 코드에서는 list1 리스트의 인덱스 2 위치(d)에 'c' 요소를 삽입하고 (b와d사이? d앞에 오는것같은데.. 이 부분은 잘모르겠다; ) 따라서, list1은 ['a','b','c','d']가 됩니다

4-11.

void main() {
  List list1 = [5,4,3,2,1,0];
  list1.remove(0);
  print(list1);
}

이 리스트의 이름은 list1이고, 5부터 0까지의 값을 갖습니다 list1에서 0 값을 삭제합니다, remove(0) list1을 출력하면 [5,4,3,2,1] 이 됩니다.

4-12.

void main() {
  List list1 = [5,4,3,2,1,0];
  list1.removeAt(0);
  print(list1);
}

• remove(0)은 [5,4,3,2,1] remove(0)의 괄호안에 0이라고 되어있는데 원하는 숫자 (예시로) 0 을 적으면 그 숫자를 삭제하는 것 같다
• removeAt(0)은 리스트의 특정 인덱스에 해당하는 값을 삭제하고자 할 때 사용한다 이거는 0부터 시작하니까 [5,4,3,2,1,0]에서 5를 삭제한다
• • 답은 [4, 3, 2, 1, 0]

4-13.

void main() {
  List list1 = [5,4,3,2,1,0];
  list1.shuffle();
  print(list1);
}

shuffle는 '섞다'라는 뜻이다 즉, 무작위로 배열된다는 뜻이다 (랜덤같은것이다)

이제는 좀 복잡해진다..

4-14.

void main() {
  List list1 = [5,4,3,2,1,0];
  List list2 = [];
  list2.add(list1.isEmpty);
  list2.add(list1.isNotEmpty);
  list2.add(list1.length);
  list2.reversed;
  print(list2);
}

• Empty는 '(텅)빈'이라는 뜻이다 list2.add(list1.isEmpty)는 list1이 비어있는지 여부를(T,F로) list2에 추가함
• 리스트가 비어있지 않으므로 false이다
• NotEmpty은 비어있지않는 것이므로 list1이 비어있지 않은지 여부를(T,F로) list2에 추가함
• 리스트가 비어있지 않으므로 true이다 length는 '길이'라는 뜻이다
• list2.add(list1.length); 에서 길이는 6이다 (6칸이므로) 그리고 list1의 길이를 list2에 추가한다
• reversed는 '반대의'라는 뜻으로 list1을 뒤집습니다(reversed) ↓ 멘토답변 print(list2.reversed); 로 하면 뒤집어진 결과가 나오지만 list2.reversed만 사용하면 아무런 변화가 없습니다 list2.reversed; 대신 list2 = list2.reversed.toList(); 를 적어주시고 print(list2); 를 하시면 뒤집어진 결과가 출력됩니다 아직 배우지않은 함정문제였다

어렵다..

4-15.

void main() {
  List list1 = [0, 1, 2, 3, 4, 5, true, false];
  List list2 = [];
  list2.add(list1.contains(list1[list1.length - 1]));
  list2.insertAll(0, ['a', 'b', 'c', 1, 2, 3]);
  list2.indexOf(true)-list2.indexOf(false);
  print(list2.indexOf(true)-list2.indexOf(false));
}

• contains는 포함하다 라는 뜻입니다
• List1과 List2를 선언(초기화)하고

리스트의 인덱스는 0부터 시작하므로, 마지막 인덱스 요소(뒤에서부터1칸)는 -1이 된다 따라서 [list1.length - 1]이 되고

list2.add(list1.contains(list1[list1.length - 1]));에서 contains() 는 리스트에서 주어진 객체가 _포함_되어 있는지 여부를 확인하는 역할이다

• insert(삽입하다) insertAll는 어떤 리스트 위치에 다른 리스트 요소를 모두(?) 삽입할 수 있도록 해줍니다...

위 마지막 문제는 찾기도 까다롭고 다른 문제보다 어려웠습니다.

마지막문제는 혼자 다 못풀었네요.. 모르는 것:

list2.insertAll(0, ['a', 'b', 'c', 1, 2, 3]); list2.indexOf(true)-list2.indexOf(false); print(list2.indexOf(true)-list2.indexOf(false));

• 다트 데이터타입과 파이썬 데이터타입의 비슷한 점

  = 다트와 파이썬은 모두 정수와 실수, 문자열, 불리언(Boolean)을 지원한다

2023/03/22 스나이퍼팩토리 Flutter 모바일 어플리케이션 부트캠프과정

우선, 1일차(오늘)에 학습한 내용이다

• 용어정리와 플러터에 관한 설명
• 다트패드 사용법
• 프론트엔드와 백엔드
• 프로그래밍 기본 구조
• 다트언어를 이용한 계산
• 데이터타입
• 변수 만들기

이름을 저장하기 위한 String 변수 만드는 방법중에 가장 올바른 것은?

1) myName = Teddy; 오답 2) MyName = "Teddy"; 3) myName = "Teddy"; 정답 4) myName = "Teddy"

String은 문자이기 때문에 따옴표로 감싸야한다

웹사이트 URL을 저장하려고 한다. 어떤 데이터타입이 가장 어울리는가?

1)List 2)String 정답 3)double 오답 4)bool

"2.3"안에 점이 있어도 따옴표로 감싸져있기때문에 문자열이다

혹시 문자와 수가 같이 있으면 에러로 표시되나?

결과값은 51032945059 이렇게되지는 않을까..? 또는 이렇게 되지 않을까

멘토님께 물어보니 문자와 숫자는 더할 수가 없다고한다

void main() {
 print(10+10+10)*(10-50*50)/2;
}

아래 코드는 위 코드를 정정한 것이다

void main() {
  print((10+10+10)*(10-50*50)/2);
}

처음 코드의 부분에서 에러가 난 이유가 출력하는 문법은 print() 인데 () 소괄호를 입력을 안했었다