-
[Flutter] host platform ๊ตฌ๋ณ (Web, Phone)Flutter ํ ํฌ 2022. 7. 26. 22:33
- ๊ตฌํ๋ด์ฉ
- ๊ตฌํ๋ฐฉ๋ฒ
๊ตฌํ ๋ด์ฉ
ํ๋ก๊ทธ๋จ์ด ๋์๊ฐ๋ ํ๊ฒฝ์ด ์น์ธ์ง ํฐ์ธ์ง ๊ตฌ๋ณํ๋ค.
๊ตฌํ ๋ฐฉ๋ฒ 1๋ฒ. (ํ๋ซํผ ๊ตฌ๋ณ)
import 'package:flutter/foundation.dart' as IsWeb; if (IsWeb.kIsWeb) { // running on the web! print('web'); } else { // NOT running on the web! You can check for additional platforms here. print('phone'); }
๊ตฌํ ๋ฐฉ๋ฒ 2๋ฒ. (ํ๋ฉด ์ฌ์ด์ฆ์ ๋ฐ๋ผ)
์น์ ๊ฒฝ์ฐ ๋ค์ํ ์ฌ์ด์ฆ๋ก ๋ณํ ์ ์๊ธฐ ๋๋ฌธ์ ์น์ ์ฌ์ด์ฆ๊ฐ ๋ชจ๋ฐ์ผ ์์ค์ผ๋ก ์์์ก์ ๋ ๋ชจ๋ฐ์ผ UI๋ก ๋ณ๊ฒฝํด์ผ ํ ๋๊ฐ ์๋ค.
ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ์ ์๋ง๊ฒ ์ฌ์ด์ฆ๋ฅผ ๋ฐ๊ฟ์ฃผ๋ ํจ์๋ฅผ ๋ง๋ค์์ผ๋ฉฐ ํด๋น ํจ์์ ํ๋ผ๋ฏธํฐ๋ก ์ฌ์ด์ฆ๋ฅผ ๋๊ฒจ์ฃผ๋ฉด ๋๋ค.
ํ๋ฉด ํฌ๊ธฐ ์กฐ์ ํด๋์ค, ํ๋ซํผ ๊ตฌ๋ณ ํด๋์ค
import 'package:flutter/material.dart'; import 'package:frontend/responsive.dart'; class SizeCalculate { // ์น ํ์ด์ง์ ๊ฒฝ์ฐ ๋ค์ํ ํฌ๊ธฐ๋ก ๋ณ๊ฒฝ ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ ๋ฐ์ํ์ผ๋ก ๋ง๋ค์ด ์ค๋ฅ๊ฐ ๋์ง ์๊ฒ ํ๊ธฐ ์ํจ์ ๋๋ค. double heightCalculate(screenSizeHeight, height) { var ratio = height / screenSizeHeight; return screenSizeHeight * ratio; } // ์น ํ์ด์ง์ ๊ฒฝ์ฐ ๋ค์ํ ํฌ๊ธฐ๋ก ๋ณ๊ฒฝ ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ ๋ฐ์ํ์ผ๋ก ๋ง๋ค์ด ์ค๋ฅ๊ฐ ๋์ง ์๊ฒ ํ๊ธฐ ์ํจ์ ๋๋ค. double widthCalculate(screenSizeWidth, width) { var ratio = width / screenSizeWidth; return screenSizeWidth * ratio; } } class ClassificationPlatform { // criteriaSize : ๋ถ๋ฅ ๊ธฐ์ค์ด ๋๋ ์ฌ์ด์ฆ classifyWithScreenSize({required context, criteriaSize = 900}) { final double screenWidthSize = MediaQuery.of(context).size.width; // 900๋ณด๋ค ์์ ๊ฒฝ์ฐ์ Renderflex ๋ฐ์ if (screenWidthSize > criteriaSize) { return 2; } else { return 0; } } classifyWithDevice({required context,}) { if (Responsive.isMobile(context)) { return 0; } else if (Responsive.isTablet(context)) { return 1; } else { return 2; } } }
์ฌ์ฉ๋ฒ
1. ํ๋ฉด ์ฌ์ด์ฆ์ ๋ง๊ฒ ๋ชจ๋ฐ์ผ ๋๋ ์น UI ๋ฐ์
var platform; @override Widget build(BuildContext context) { if (_classificationPlatform.classifyWithScreenSize(context: context, criteriaSize: 900) == 0) { // mobile,tablet platform = 0; } else { // web platform = 2; } return platform == 0 ? mobileBody() : webBody(); }
2. webBody()์์ ํ๋ฉด ํฌ๊ธฐ ์กฐ์
Container( width: _sizeCalculate.widthCalculate(screenSizeWidth, 260), height: _sizeCalculate.heightCalculate(screenSizeHeight, 260), ),
'Flutter ํ ํฌ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Flutter Fastlane CI/CD(1) - iOS (0) 2023.03.07 [Flutter] YouTube player (0) 2022.08.25 [Flutter] ๊ฒ์๊ธ ๊ธฐ๋ฅ์ ํ์ํ ํจ์๋ค(Firestore์ฌ์ฉ) (0) 2022.07.22 [Flutter] ํด๋ฆฝ๋ณด๋์ ๋ณต์ฌ๋ ํ ์คํธ ์ธ์, ํด๋ฆฝ๋ณด๋์ ๋ณต์ฌ ๋ฐ ํ์ฉ (0) 2022.07.12 Flutter firestore stream pagination (firestore ์ฟผ๋ฆฌ ํ์ด์งํํ๊ธฐ) (0) 2022.03.19