Webview를 이용한 웹사이트 패키징 이번에 Webview를 사용해보겠습니다. 먼저 만들어두었던 Screen 디렉터리에 Webview를 위한 클래스를 하나 만들어줍시다. class InitialWebView extends StatelessWidget { const InitialWebView({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: WebView( initialUrl: 'https://blog.codefactory.ai', ), ); } } Scaffold의 Body에 Webview를 주고 첫 페이지를 띄울 URL을 https://blog.codefac..

Web View 어떤 웹사이트를 앱에 패키징하는걸 웹 뷰라고 합니다. WebView를 사용하면 원래 앱애 존재하던 것처럼 사용할 수 있습니다. 블로그 사이트를 웹 뷰로 제작해보겠습니다. 주요 기술 Web View : 웹뷰에 웹사이트를 넣습니다. App Bar : 앱 상단의 디자인을 담당합니다. pub.dev (외부 패키지 활용법) : 오픈소스 라이브러리들이 모여있는 사이트 입니다. 프로젝트에 패키지 추가 pub.dev 사이트 접속 사이트에 접속해서 중앙 검색창에 webview를 검색합니다. flutter.dev (플러터 공식 개발팀)이 올린 webview_flutter를 클릭해 들어갑니다. 들어가서 맨위 flutter_webview 이름에 마우스를 올려놓으면 옆에 복사버튼이 있는데 복사해줍니다. 이제 프..

Row and Column (실습) 아래 화면을 만들어 보면서 Row와 Column을 연습해보자. Column, Row를 활용하여 상위,하위 클래스들과의 관계를 생각하며 진행했습니다. mainAxisAlignment와 Container, Row를 적절히 활용하여 완성.

Row and Colume (Expanded & Flexible Widget) Expanded와 Flexible 위젯은 무조건 Colume이나 Row 위젯의 Children 에만 사용이 가능합니다. 이전에 만들었던 HomeScreen의 하위 컨테이너에 Expanded를 적용해 보겠습니다. Expanded( child: Container( color: Colors.red, width: 50.0, height: 50.0, ), 4개의 하위 컨테이너 중 맨위의 컨테이너에 적용해보니, 남은 여백을 전부 채워주는것을 볼 수 있습니다. 이번엔 2번째 컨테이너도 적용해 보겠습니다. Expanded( child: Container( color: Colors.red, width: 50.0, height: 50.0, ),..

Row & Column (CrossAxisAlignment) 이번엔 CrossAxisAlignment에 대해 학습합니다. 저번에 MainAxisAlignment에 대해 배웠는데, 이 기능은 주축 정렬이었습니다. 반대로 CrossAxisAlignment는 반대축 정렬의 기능을 가집니다. MainAxisAlignment 같은 경우 Row일때는 가로 정렬, Column일때는 세로정렬입니다. CrossAxisAlignment는 정확히 그 반대입니다. Row는 세로 Column일때는 가로입니다. 여기서 문제점은 반대축을 정렬하기 위해 상위 Container의 가로축인 검정색 배경 부분을 늘려야 합니다. 상위 Container의 검은색 배경을 늘리기 위해 위젯 코드를 변경해 보겠습니다. import 'pac..

Row & Column (MainAxisAlignment) 저번에 Column Widght에 mainAxisAlignment의 Center 속성을 사용했었습니다. ManAxisAlignment는 주축 정렬을 하는데 사용하는 위젯이었습니다. 이번엔 MainAxisAlignment의 모든 속성을 전부 사용해 보겠습니다. 저번에 만들었던 HomeScreen의 SafeArea코드에 적용해보겠습니다. MainAxisAlignment의 속성을 Start로 두면 하위의 위젯들의 변동이 없습니다. 왜냐하면, 이미 주축이 시작부분으로 되어 있으니까요. end로 하면 위젯들이 아래부터 채워질겁니다. 당연히 center로 설정을 하면 위젯들이 가운데로 올거고, spaceBetween으로 설정한다면 1개의 Container마..

Row & Column Flutter에서 스크린 단 분리를 할때 StatelessWidget을 상속받아서 만들어왔었다. 이걸 일일이 작성하기 귀찮아서 Flutter는 stless 키워드를 차면 자동 완성을 해준다. class HomeScreen extends StatelessWidget { const HomeScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const Placeholder(); } } 위의 템플릿을 이용해 아래와 같이 작성해왔었는데 스크린 단의 클래스를 디렉터리에 따로 모아서 하는게 더 편하므로, HomeScreen 클래스를 따로 만들어 준다. void main() { run..