[Flutter] 기본 위젯 4개(Text, Icon, Image, Box widget)

 

1) main.dart에서 void main{} 밑에 다 지움

2) stless치고 class name - MyApp

class MyApp extends StatelessWidget {
  const MyApp({Key? key}): super(key: key);
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Image.asset('probono.jpg')

    );
  }
}

 

3) Widget - 저장하면 바로 반영됨 

* Center() 를 부모를 하면 가운데를 기준으로! 

3-1) home : Text('문자')

3-2) Icon(Icons.아이콘이름)   e.g. Icon(Icons.star)

 

3-3) Image.asset('경로~')

! 이미지 경로는 assets 디렉토리 생성후 그 아래에 위치 

! 이미지를 쓰기위해서는 pubspec.yaml에 등록해야함 

flutter:
  assets:
    - assets/ #assets의 모든 이미지 파일을 쓰겠다. 

 

4) Box

   (1) Container()

       Flutter Size 단위는 LP

return MaterialApp(
  home: Center(
    child:Container(width: 50, height:50, color: Colors.blue)
  )

   (2) SizedBox()

 

 

 

+@) 4개 위젯 모두 사용해보기 

1. SingleChildScrollView : 이 위젯은 자식 위젯이 주어진 공간을 벗어날 경우 스크롤 기능을 제공합니다. 즉, 화면에 보이지 않는 부분이 있을 경우 사용자가 스크롤하여 볼 수 있게 해줍니다. 이 위젯은 일반적으로 긴 리스트나 그리드, 혹은 화면 크기보다 더 큰 위젯을 다룰 때 사용됩니다.
2. mainAxisAlignment: MainAxisAlignment.center : 이 속성은 Flutter에서 Row, Column, Flex 등의 위젯에서 사용되며, 자식 위젯들의 정렬을 결정합니다. MainAxisAlignment.center는 자식 위젯들을 해당 축의 중앙에 배치하도록 지정합니다. 예를 들어, Column에서는 세로축 중앙, Row에서는 가로축 중앙에 배치하게 됩니다

 home: Center(
      child: Container(
        width: 450,
        height: 450,
        color: Colors.blue,
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Hello, Flutter!'),
              Image.asset('probono.jpg'),
              Icon(Icons.star),
            ],
          ),)
      ),
    )
);