Bootstrap으로 UI 기본 구성하기
1. Bootstrap과 Flutter
Bootstrap : 프론트엔드 프레임워크 중 하나로 반응형 웹 디자인을 쉽게 구현할 수 있는 다양한 CSS, JavaScript 컴포넌트를 제공한다. 기본적으로 미리 스타일링된 컴포넌트들이 포함되어 빠르고 일관된 UI를 구축하는데 매우 유용하다.
Bootstrap과 Flutter를 조합하면 웹 어플리케이션의 사용자 인터페이스를 유연하게 구성할 수 있는데
주요 컴포넌트에는 그리드 시스템, 버튼, 카드, 폼 등이 있다. 예를 들어 그리드 시스템을 사용하면 반응형 레이아웃을 쉽게 구성할 수 있고, 카드를 사용하면 콘텐츠를 정돈된 형태로 표시할 수 있다
2. Flutter 프로젝트에 Bootstrap 연동하기
2-1. Bootstrap CDN 추가
Bootstrap을 사용하기 위해서는 index.html 파일에 Bootstrap의 CSS와 JavaScript 코드를 추가해주면 된다
index.html의 <head> 안에 다음 코드를 추가해준다
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
2-2. 기본 웹페이지 레이아웃 구성
Bootstrap의 그리드 시스템을 사용해 간단한 웹페이지 레이아웃을 구성하는 예제를 실행해보려 한다
새로운 html 파일로 작성해도 되지만 index.html 파일에 코드를 추가해서 만들어보려 한다
index.html의 <body> 태그 내에 추가
<div class="container mt-5">
<div class="row">
<div class="col-md-8">
<h1 class="mb-4">Welcome to My Flutter Web App</h1>
<p>This is a simple web page layout using Bootstrap. You can use this layout to structure your web content
effectively.</p>
<button class="btn btn-primary">Click Me</button>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Side Content</h5>
<p class="card-text">This is some additional content you can place on the side of your main content.</p>
</div>
</div>
</div>
</div>
</div>
> 그리드 시스템 : container, row, col-md-8, col-md-4 클래스를 사용해 반응형 레이아웃을 구성
> 카드 컴포넌트 : Bootstrap의 카드 컴포넌트를 사용해 사이드 콘텐츠를 구성
> 버튼 : Bootstrap의 기본 버튼 스타일을 적용
2-3. Flutter 프로젝트에 Bootstrap 연동하기
index.html 파일에 Bootstrap 레이아웃을 추가해 Flutter 애플리케이션 외부에 html 콘텐츠를 배치할 수 있다
그럴려면 Flutter 프로젝트 빌드를 해줘야 한다
> VsCode 내 터미널에서 진행
cd lib
flutter build web
2-4. 결과
Flutter 웹 프로젝트에서 lib/web/index.html 대신 build/web/index.html이 생성된다
* 정리*
lib/web/index.html : 개발 중 사용하는 원본 파일
build/web/index.html : Flutter가 빌드 후 최종적으로 실행할 수 있는 완성된 파일
1) lib 내 index.html : 개발용 소스 파일
lib 폴더는 Flutter 애플리케이션의 소스 코드가 있는 곳으로 Dart 코드와 UI 정의가 포함되어 있다
lib/web의 index.html은 Flutter 웹 애플리케이션의 진입점 파일로 여기에 Bootstrap과 같은 외부 라이브러리를 포함시키는 작업을 한다
이 폴더의 파일은 빌드 전 애플리케이션을 구성하는 원본 파일이라 할 수 있다
2) build 내 index.html : 빌드 결과물
Flutter가 빌드한 후 애플리케이션을 실행할 준비가 된 파일이 모이는 곳
flutter build web 명령어를 실행하면 Dart 코드가 자바스크립트로 변환되고
lib 폴더 내 소스파일이 최적화되어 build/web에 저장된다
2-5.실행
index.html을 클릭하면 기본 브라우저에서 파일이 열린다
Flutter 위젯 기초 - Text, Image 위젯
Text, Image 위젯 : Flutter에서 가장 많이 사용되는 기본 위젯
1. Text., Image 위젯 사용방법
1-1. Text 위젯
텍스트를 화면에 표시하기 위한 위젯 / 텍스트 정렬, 색상, 폰트 크기 등을 조정할 수 있다
> 기본적인 사용방법(dart)
Text(
'Hello, Flutter!',
style: TextStyle(fontSize: 24, color: Colors.blue),
);
1-2. Image 위젯
이미지를 화면에 표시하기 위한 위젯 / 네트워크 이미지, 로컬 이미지 등을 불러와 사용할 수 있다
> 기본적인 사용방법(dart)
Image.network(
'https://example.com/image.jpg',
width: 100,
height: 100,
);
2. 위젯 사용 및 실행
2-1.main.dart 파일 코드 수정
lib/main.dart 파일을 아래와 같이 수정해 Text 위젯과 Image 위젯을 활용한 간단한 UI를 구성해준다
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Widget Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'Hello, Flutter!',
style: TextStyle(fontSize: 24, color: Colors.blue),
),
const SizedBox(height: 20),
Image.network(
'https://example.com/image.jpg',
width: 150,
height: 150,
),
],
),
),
),
);
}
}
2-2. 코드 분석
1) Text 위젯
children: <Widget>[
const Text(
'Hello, Flutter!',
style: TextStyle(fontSize: 24, color: Colors.blue),
),
Hello, Flutter! 텍스트를 파란색, 24 크기로 화면에 출력
2) Image 위젯
Image.network(
'https://example.com/image.jpg',
width: 150,
height: 150,
),네트워크에서 image를 불러와 출력
이미지 크기는 가로 세로 150px로 설정
3) Column 위젯
child: Column(
mainAxisAlignment: MainAxisAlignment.center,Text와 Image 위젯을 감싸주는 child에 작성
텍스트와 이미지를 수직으로 배치해준다
(mainAxisAlignment : MainAxisAlignment.center : 중앙정렬)
2-3. 실행
VsCode 터미널에서 명령어를 실행해 Flutter 애플리케이션을 실행
flutter run
시리즈
1. 설정_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발
https://tiny-immj.tistory.com/73
1. 설정_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발
'Docker 설치 및 기본 실습'과 'Flutter 환경 설정'으로 진행된다 Docker 설치 및 기본 실습 1. Docker 설치(for window)> Docker 공식 웹사이트에서 Docker Desktop for Windows 설치파일을 다운로드하기 https://docs.doc
tiny-immj.tistory.com
2. Flutter 개발환경 설정_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발
https://tiny-immj.tistory.com/74
2.Flutter 개발 환경 설정_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발
개발환경 선택플러터 개발을 할 때는 대상 웹과 동일한 플랫폼에서 해야 합니다즉 Mac OS용으로 개발하기 위해선 Mac이 필요하고 Windows 타깃으로 개발을 하기 위해선 Windows PC가 필요합니다 저는
tiny-immj.tistory.com
3. 기초 프로젝트 생성, AVD(안드로이드) 실행_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발
https://tiny-immj.tistory.com/75
3. 기초 프로젝트 생성_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발
Flutter 프로젝트 실습 : Hello World 프로젝트 만들기 cmd에서 Flutter 프로젝트를 생성해보자 $ flutter create [프로젝트명]$ flutter create hello_world ※ 프로젝트명은 소문자로만 작성이 가능하다 숫자가
tiny-immj.tistory.com
4. Hello World 코드 분석 _Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발
https://tiny-immj.tistory.com/76
4.Hello World 코드 분석_Flutter, Bootstrap을 활용한 크로스 플랫폼 웹 개발
Hello World 프로젝트 분석하기1. 해당 코드https://tiny-immj.tistory.com/75 Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발_3. 기초 프로젝트 생성Flutter 프로젝트 실습 : Hello World 프로젝트 만들기 cmd에서
tiny-immj.tistory.com
5. Dart 언어 기초_ Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발
https://tiny-immj.tistory.com/77
5.Dart 언어 기초1_Flutter, Bootstrap을 활용한 크로스 플랫폼 웹 개발
Dart 언어의 기초 1. 변수와 데이터 타입1) Dart의 역할Dart : Flutter의 기본 프로그래밍 언어, 강력한 타입 시스템과 간결한 문법이 특징 Flutter에서 Dart의 역할 : Dart는 Flutter 애플리케이션의 모든 로
tiny-immj.tistory.com
