도전하기

• 카카오톡 친구 탭

  

  

  

// ignore_for_file: prefer_const_literals_to_create_immutables, prefer_const_constructors, file_names

import 'package:flutter/material.dart';
import 'package:badges/badges.dart' as badges;

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

class Friend {
  String img;
  String name;
  String? message;
  String? music;    // nullable

  Friend({required this.img, required this.name, this.message, this.music});
}

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

  @override
  Widget build(BuildContext context) {
    List<Friend> friends = [
      Friend(img: '<http://picsum.photos/48/48>', name: '전여친', message: '똥차다음벤츠라더니', music: '똥밟았네'),
      Friend(img: '<http://picsum.photos/48/48>', name: '전여친'),
      Friend(img: '<http://picsum.photos/48/48>', name: '전여친', message: '똥차다음벤츠라더니'),
      Friend(img: '<http://picsum.photos/48/48>', name: '전여친', music: '똥밟았네'),
      Friend(img: '<http://picsum.photos/48/48>', name: '전여친', message: '똥차다음벤츠라더니', music: '똥밟았네'),
      Friend(img: '<http://picsum.photos/48/48>', name: '전여친', message: '똥차다음벤츠라더니', music: '똥밟았네'),
      Friend(img: '<http://picsum.photos/48/48>', name: '전여친', message: '똥차다음벤츠라더니'),
      Friend(img: '<http://picsum.photos/48/48>', name: '전여친', message: '똥차다음벤츠라더니', music: '똥밟았네'),
      Friend(img: '<http://picsum.photos/48/48>', name: '전여친', message: '똥차다음벤츠라더니', music: '똥밟았네'),
      Friend(img: '<http://picsum.photos/48/48>', name: '전여친', message: '똥차다음벤츠라더니', music: '똥밟았네'),
      Friend(img: '<http://picsum.photos/48/48>', name: '전여친', message: '똥차다음벤츠라더니'),
      Friend(img: '<http://picsum.photos/48/48>', name: '전여친', message: '똥차다음벤츠라더니', music: '똥밟았네'),
    ];

    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            foregroundColor: Colors.black,
            elevation: 0,
            centerTitle: false,
            title: Text('친구'),
            actions: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Icon(Icons.search),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Icon(Icons.person_add_alt),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Icon(Icons.music_note_outlined),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Icon(Icons.settings_outlined),
              )
            ],
          ),
          body: ListView(
            children: [
              SizedBox(
                height: 80,
                child: PageView(
                  children: [
                    Image.asset('assets/images/kakaotalk/event_1.png'),
                    Image.asset('assets/images/kakaotalk/event_2.png'),
                  ],
                ),
              ),
              ListTile(
                leading: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(17),
                  ),
                  clipBehavior: Clip.antiAlias,
                  child: Image.network('<http://picsum.photos/50/50>'),
                ),
                title: Text('SFAC', style: TextStyle(fontWeight: FontWeight.bold),),
              ),
              Padding(
                padding: const EdgeInsets.fromLTRB(20, 10, 8, 20),
                child: Divider(
                  height: 2,
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(left: 20),
                child: Text('친구 ${friends.length}'),
              ),
              Column(
                children: List.generate(
                  friends.length, (index) => ListTile(
                  leading: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(17),
                    ),
                    clipBehavior: Clip.antiAlias,
                    child: Image.network(friends[index].img),
                  ),
                  title: Text(friends[index].name, style: TextStyle(fontWeight: FontWeight.bold),),
                  subtitle: 
                  // message 존재하면 subtitle 보여주고 없으면 안보여주기
                  subtitle: friends[index].message != null ? Text(friends[index].message!) : null,
                  // music이 존재하면 trailing 보여주고 없으면 안보여주기
                  trailing: friends[index].music != null ?
                    Container(
                      width: 100,
                      decoration: BoxDecoration(
                          border: Border.all(color: Colors.green),
                          borderRadius: BorderRadius.circular(10)
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Text(friends[index].music!),
                          Icon(Icons.play_arrow_outlined,color: Colors.green,),
                        ],
                      ),
                    ) : null,
                  ),
                )
              ),
            ],
          ),
          bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            selectedItemColor: Colors.black,
            showSelectedLabels: false,
            showUnselectedLabels: false,
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.person), label: 'friends'),
              BottomNavigationBarItem(
                icon: badges.Badge(
                  badgeContent: Text('99', style: TextStyle(color: Colors.white),),
                  child: Icon(Icons.chat_bubble_outlined),), label: 'message'),
              BottomNavigationBarItem(
                  icon: Icon(Icons.remove_red_eye_outlined), label: 'view'),
              BottomNavigationBarItem(
                  icon: Icon(Icons.add_business), label: 'shop'),
              BottomNavigationBarItem(
                  icon: Icon(Icons.more_horiz), label: 'more'),
            ],
          ),
        )
    );
  }
}

주간평가 (키오스크 앱)

• Output

  

Requirements

1. 음식을 누르면 주문 리스트에 담기는 키오스크앱을 만들어봅니다.
2. 음식이미지는 자유이며, 필요한 경우 위에 첨부된 파일을 이용하여도 됩니다.
3. 하단에 떠있는 버튼을 누르면 지금까지 주문된 주문 리스트를 초기화합니다.
4. 하단에 떠있는 버튼은 정중앙의 하단, 넓게 펴진 형태로 [ 초기화하기 ] 텍스트를 포함합니다.
5. 음식이 보여지는 것은 [갤러리] 형태로 보여지게 하며, 검색을 통해 해결합니다.
6. 그 외 UI 디자인은 자유입니다.

• MenuTile.dart

  import 'package:flutter/material.dart';
  
  class MenuTile extends StatelessWidget {
    const MenuTile({Key? key, required this.imgUrl, required this.name}) : super(key: key);
  
    final String imgUrl;
    final String name;
  
    @override
    Widget build(BuildContext context) {
      return Container(
        decoration: BoxDecoration(
            boxShadow: const [
              BoxShadow(
                color: Colors.black12,
                blurRadius: 4,
                spreadRadius: 1,
              )
            ]
        ),
        child: Container(
          color: Colors.white,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                height: 75,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(imgUrl),
                    fit: BoxFit.cover,
                  )
                ),
              ),
              Text(name, style: TextStyle(fontWeight: FontWeight.bold),),
              Text('[담기]'),
            ],
          ),
        ),
      );
    }
  }
  
  

• Kiosk.dart