기본 위젯 구현하기

안드로이드 스튜디오에서

New -> new flutter Project -> web을 추가하여 테스트

 

stless -> statelessWidget이 생성됨

 

text, icon, image, 

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: Text('hello world'),
    );
  }
}

Icon

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: Icon(Icons.star),
    );
  }
}

Icons 목록

https://api.flutter.dev/flutter/material/Icons-class.html

Icons class - material library - Dart API

Image

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: Image.asset('assets/a.jpg'),
    );
  }
}

assets 폴더에 image를 추가한후, 그 경로로 image를 가져옴

 

assets 폴더를 스캔하려면 pubspec.yaml의 flutter:에 다음 코드를 추가해야함

flutter:
  assets:
    - assets/

 

Box

 

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: Center(
        child: Container(width: 50, height: 50, color: Colors.blue),
      )
    );
  }
}

 

Center의 하위 컴포넌트에 Container를 추가하여 구현

 

50의 단위 = LP

50LP = 1.2cm

 

Box는 레이아웃의 기본이 됨

 

 

출처:

코딩애플 https://www.youtube.com/watch?v=mLQ-ehf3d6Y