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..