flutter

플러터 기본 위젯

Daekyue 2023. 1. 3. 13:21

main.dart가 내가 사용할 메인 페이지가 된다.

main.dart에서 void main()아래 stless를 입력한 뒤 tab을 누르면

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

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

다음과 같이 입력이 된다. 이때 class 뒤에 클래스 이름을 입력해준다

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

------> //위의 코드를 아래처럼

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    home:	//여기에 위젯을 넣는다
    );
  }
}

//글자넣을때
    return MaterialApp(
    home: Text('글내용')	//여기에 위젯을 넣는다
    );
  }
}

// 아이콘 넣을때
    return MaterialApp(
      home: Icon(Icons.star)	//아이콘의 이름은 flutter 홈페이지에서 찾을수있다
    );
  }

이미지를 넣을때는 이미지를 등록을 해야한다

등록을 진행할때는 pubspec.yaml 파일 중간쯤에 flutter: 라고 있는 곳 아래에 다음과 같이 입력한다

flutter:
  assets:
    - 이미지가 있는 폴더이름/
return MaterialApp(
      home: Image.asset('이미지 파일이 있는 폴더/이미지 파일') // 이미지를 넣을경우 프로젝트 폴더안에 이미지가 존재해야함
    );

위젯 박스를 넣을때는 부모요소를 입력해주어야한다.

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

다음과 같이 사용하게되면 화면 가운데에 높이 50 너비 50인 파란색 네모박스가 생성된다