Flutter - 3회차 (widget: Padding, Container, Icon, ListTile, SingleChildScrollView)

실습: Padding 위젯

 

 

실습: Container 위젯

컨테이너에 색상 넣기

// ignore_for_file: prefer_const_constructors

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar( // properties
          backgroundColor: Color.fromARGB(255, 30, 111, 233),
          title: Text("연락처 앱")
        ),
        body: Padding(
          padding: const EdgeInsets.all(15.0),
          child: Column(
            children: [
              Container(
                width: 40,
                height: 40,
                color: Colors.red,
              ),
              Container(
                width: 40,
                height: 40,
                color: Colors.orange,
              ),
              Container(
                width: 40,
                height: 40,
                color: Colors.yellow,
              ),
              Container(
                width: 40,
                height: 40,
                color: Colors.green,
              ),
              Container(
                width: 40,
                height: 40,
                color: Colors.blue,
              ),
    
            ]
            ),
        ),
        ),
          
        );
       


  }
}

Child를 Row로 바꾸면 가로로 된다.

 

실습: Icon 위젯

 

body: Icon(Icons.adb)

// ignore_for_file: prefer_const_constructors

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar( // properties
          backgroundColor: Color.fromARGB(255, 30, 111, 233),
          title: Text("연락처 앱")
        ),
        body: Padding(
          padding: const EdgeInsets.all(2),
          child: Row(
            children: [
              Icon(Icons.person),
              Icon(Icons.phone),
              Icon(Icons.settings),
            ],
          ),
        )
        ),
          
        );
       


  }
}

ListTile 위젯

m2.material.io/components/lists

ListTile을 Column으로 바꿔준다.

SingleChildScrollView : Column / Row Widget과 함께 쓰임

ListView : SingleChildScrollView + Column / Row Widget과 함께 쓰임

마지막 실습: AppBar 그림자 없애고 아이콘 추가, 전체 카운트 문구 집어넣기

// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar( // properties
          backgroundColor: Color.fromARGB(255, 30, 111, 233),
          title: Text("Contacts"),
          elevation: 0,
          leading: IconButton(
            onPressed: () {},
            icon: Icon(Icons.contact_page),
          )
        ),
        body:  ListView(
            children:  [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Total: 20 people'),
              ),
              ListTile( // no child. 위젯마다 사용법이 다름
                title: Text('Agatha'),
                subtitle: Text('010-2341-2342'),
                leading: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Icon(Icons.person),
                ),
                trailing: Icon(Icons.call,
                color: Colors.green),
        
              ),
              ListTile( // no child. 위젯마다 사용법이 다름
                title: Text('Bobby'),
                subtitle: Text('010-2341-2342'),
                leading: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Icon(Icons.person),
                ),
                trailing: Icon(Icons.call,
                color: Colors.green),
        
              ),
              ListTile( // no child. 위젯마다 사용법이 다름
                title: Text('Cyan'),
                subtitle: Text('010-2341-2342'),
                leading: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Icon(Icons.person),
                ),
                trailing: Icon(Icons.call,
                color: Colors.green),
        
              ),
              ListTile( // no child. 위젯마다 사용법이 다름
                title: Text('David'),
                subtitle: Text('010-2341-2342'),
                leading: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Icon(Icons.person),
                ),
                trailing: Icon(Icons.call,
                color: Colors.green),
        
              ),
              ListTile( // no child. 위젯마다 사용법이 다름
                title: Text('Emily'),
                subtitle: Text('010-2341-2342'),
                leading: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Icon(Icons.person),
                ),
                trailing: Icon(Icons.call,
                color: Colors.green),
        
              ),
              ListTile( // no child. 위젯마다 사용법이 다름
                title: Text('Fred'),
                subtitle: Text('010-2341-2342'),
                leading: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Icon(Icons.person),
                ),
                trailing: Icon(Icons.call,
                color: Colors.green),
        
              ),
              ListTile( // no child. 위젯마다 사용법이 다름
                title: Text('George'),
                subtitle: Text('010-2341-2342'),
                leading: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Icon(Icons.person),
                ),
                trailing: Icon(Icons.call,
                color: Colors.green),
        
              ),
              ListTile( // no child. 위젯마다 사용법이 다름
                title: Text('Heather'),
                subtitle: Text('010-2341-2342'),
                leading: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Icon(Icons.person),
                ),
                trailing: Icon(Icons.call,
                color: Colors.green),
        
              ),
              ListTile( // no child. 위젯마다 사용법이 다름
                title: Text('Ivy'),
                subtitle: Text('010-2341-2342'),
                leading: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Icon(Icons.person),
                ),
                trailing: Icon(Icons.call,
                color: Colors.green),
        
              ),
              ListTile( // no child. 위젯마다 사용법이 다름
                title: Text('Jake'),
                subtitle: Text('010-2341-2342'),
                leading: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Icon(Icons.person),
                ),
                trailing: Icon(Icons.call,
                color: Colors.green),
        
              ),
              ListTile( // no child. 위젯마다 사용법이 다름
                title: Text('Khris'),
                subtitle: Text('010-2341-2342'),
                leading: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Icon(Icons.person),
                ),
                trailing: Icon(Icons.call,
                color: Colors.green),
        
              ),
              ListTile( // no child. 위젯마다 사용법이 다름
                title: Text('Lil'),
                subtitle: Text('010-2341-2342'),
                leading: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Icon(Icons.person),
                ),
                trailing: Icon(Icons.call,
                color: Colors.green),
        
              ),
              ListTile( // no child. 위젯마다 사용법이 다름
                title: Text('Khris'),
                subtitle: Text('010-2341-2342'),
                leading: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Icon(Icons.person),
                ),
                trailing: Icon(Icons.call,
                color: Colors.green),
        
              ),
              ListTile( // no child. 위젯마다 사용법이 다름
                title: Text('Missy'),
                subtitle: Text('010-2341-2342'),
                leading: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Icon(Icons.person),
                ),
                trailing: Icon(Icons.call,
                color: Colors.green),
        
              ),
            ],
          ),
        )
        );
          
       
       


  }
}