모든 웹사이트를 앱으로 변환: Flutter webview

소개

모바일 앱은 온라인 비즈니스에 정말 필수적입니다. 대부분의 경우 비즈니스는 자체 웹사이트가 여전히 관련성을 유지하기 위해 고객의 요구를 충족하는 앱을 만듭니다. 이러한 앱의 대부분은 고객이 쉽게 액세스할 수 있으며 온보딩 프로세스가 잘 구성되어 있으면 이러한 회사의 전환이 막대할 수 있습니다. 웹사이트가 웹사이트의 모바일 앱 버전을 만드는 경향이 있는 또 다른 이유는 광고 수익을 늘리기 위해서입니다. 가장 인기있는 앱 광고 서비스는 Google Admob이며 적절한 구조화를 통해 광고 수익이 엄청날 수 있습니다.



웹사이트가 있고 앱 버전을 만들고 싶다고 가정해 보겠습니다. 개발자로서 이를 수행하는 가장 좋은 방법은 모바일 앱 간에 데이터를 교환할 수 있는 API(이전 기사에서 논의함)를 만드는 것입니다. 그리고 데이터베이스(백엔드). 이 경로를 사용하면 앱을 더 사용자 정의할 수 있지만 더 많은 작업을 수행해야 합니다.
반면에 무언가를 만들어서 사용자에게 알리고 싶다면 다른 방법으로 webview를 사용하는 것입니다.

플러터 웹뷰란?

Flutter webview를 사용하면 앱에 웹 페이지를 표시할 수 있습니다. 또한 웹 브라우저로 작동하지 않습니다. 자세히 알아보려면 Google 검색을 할 수 있습니다.

전제 조건

이 튜토리얼을 따라하려면 Flutter 버전 2.10 이상, Android Studio를 설치하고 Flutter 앱을 실행하는 데 필요한 환경을 설정해야 합니다. Vscode, IntelliJ 또는 Android Studio에서 원하는 IDE를 사용할 수 있습니다.

Windows

MacOS

Linux

시작하자 나는 이름을 앱 web_to_app . 터미널에서 코드 실행 flutter create web_to_app

Vscode를 IDE로 사용하는 경우 다음을 수행하여 Visual Studio Code에서 폴더를 빠르게 열 수 있습니다.

C:\app\app3>cd web_to_app

C:\app\app3\web_to_app>code .

그런 다음
webview_flutter
pubspec.yaml 파일에 대한 플러그인.

webview_flutter: ^3.0.4

그런 다음 build.gradle의 앱 폴더에서 최소 sdk를 21로 변경합니다. 19에서 몇 가지 문제가 발생하여 해결하는 데 시간이 좀 걸렸습니다. 따라서 21이 더 좋지만 다른 SDK 버전을 사용해 볼 수 있지만 설명서의 최소값은 19입니다.

 minSdkVersion 21

그런 다음 lib 폴더에 home.dart 파일을 만듭니다. 그런 다음 상태 저장 위젯이 될 홈 화면을 만듭니다.

import 'package:flutter/material.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('CodenJobs App'),
      ),
    );
  }
}

그런 다음 main.dart 파일에서 홈 화면을 가져옵니다.

import 'package:flutter/material.dart';
import 'package:web_to_app/home.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Webview app',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

홈 화면에서 webview를 발판 본체로 추가합니다. 컨트롤러도 전달합니다. webviewcontroller는 나중에 앱에서 초기화되기 때문에 늦게 사용합니다. 그런 다음 플로팅 작업 버튼도 만듭니다. 이것은 앱을 새로 고치는 데 사용됩니다.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late WebViewController controller;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('CodenJobs App'),
      ),
      body: WebView(
        javascriptMode: JavascriptMode.unrestricted,
        initialUrl: 'https://www.codenjobs.com',
        onWebViewCreated: (controller) {
          this.controller = controller;
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          controller.reload();
        },
        child: const Icon(Icons.refresh),
      ),
    );
  }
}

그런 다음 앱을 실행할 수 있습니다.

https://github.com/Obikwelu/web_to_app에서 소스 코드를 받으세요.

codenjobs에서 저를 팔로우하는 것을 잊지 마세요.
Codenjobs는 개발자가 더 많은 일자리를 확보할 수 있도록 블록체인 및 암호화폐 공간에 생태계를 구축하고 있습니다. 여기about 페이지에서 코드 및 작업에 대해 자세히 알아볼 수 있습니다. 암호화에 정통한 경우 백서를 읽고 자세한 내용을 알고 프로젝트를 따를 수 있습니다. 코드 및 작업에 대한 최신 업데이트를 받으려면 아래 링크를 클릭하여 소셜 미디어 핸들에 가입하세요.

[x] Telegram : https://t.me/codenjobs

[엑스] :

[x] Discord : https://discord.gg/eWTXzPrsJ3