Zenn
Closed7

FlutterのUIパッケージを使ってみる

Flutter
Dart
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

はじめに

前回はflutter_local_notificationsという名前のローカル通知パッケージを使ってみた

https://zenn.dev/tatsuyasusukida/scraps/7516c9b5b1b71f

今回は下記のUIパッケージを使ってみる

https://pub.dev/packages/webview_flutter

https://pub.dev/packages/flutter_inappwebview

https://pub.dev/packages/adaptive_dialog

https://pub.dev/packages/cached_network_image

https://pub.dev/packages/flutter_keyboard_visibility

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

webview_flutter

準備コマンド

flutter create hello_webview
cd hello_webview
flutter pub add webview_flutter

コード

hello_webview/lib/main.dart
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo Home Page'),
      ),
      body: const WebView(
        initialUrl: 'https://flutter.dev',
      ),
    );
  }
}

android {
  compileSdkVersion 32
  defaultConfig {
    minSdkVersion 19
  }
}

実行コマンド

flutter run

実行結果

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

flutter_inappwebview

webview_flutterとの違い

WebViewウィジェットの他に下記2点が可能

  • アプリ内ブラウザ
  • ヘッドレスブラウザ

準備コマンド

flutter create hello_inappwebview
cd hello_inappwebview
flutter pub add flutter_inappwebview

コード

hello_inappwebview/lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final InAppBrowser browser = InAppBrowser();

  MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _showBrowser() {
    final url = Uri.parse('https://flutter.dev');
    widget.browser.openUrlRequest(urlRequest: URLRequest(url: url));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Text(
          'InAppWebView',
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _showBrowser,
        tooltip: 'Show Browser',
        child: const Icon(Icons.web),
      ),
    );
  }
}
hello_inappwebview/android/app/build.gradle
android {
  compileSdkVersion 33
  defaultConfig {
    minSdkVersion 17
  }
}

実行コマンド

Android実機で実行する

flutter run

実行結果

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

adaptive_dialog

準備コマンド

flutter create hello_adaptive_dialog
cd hello_adaptive_dialog
flutter pub add adaptive_dialog

コード

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> _items = [];

  Future<void> _incrementCounter() async {
    final inputs = await showTextInputDialog(
      context: context,
      textFields: <DialogTextField>[
        const DialogTextField(hintText: 'Hint text'),
      ],
    );

    if (inputs != null) {
      setState(() {
        _items.add(inputs.first);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo Home Page'),
      ),
      body: ListView(
        children: [
          for (final item in _items)
            ListTile(title: Text(item)),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

実行コマンド

flutter run

実行結果

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

cached_network_image

準備コマンド

flutter create hello_cached_image
cd hello_cached_image
flutter pub add cached_network_image

コード

hello_cached_image/lib/main.dart
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GridView.builder(
        gridDelegate:
            const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
        itemBuilder: (context, index) {
          const url = 'https://via.placeholder.com/150x150';
          // return Image.network(url);
          return CachedNetworkImage(imageUrl: url);
        },
      ),
    );
  }
}

実行コマンド

flutter run

実行結果

メモ

ネットワークが速すぎてImage.networkを使ってもあまり表示速度が変わらない

パッケージに関する下記の素晴らしいZenn記事を見つけた

https://zenn.dev/susatthi/articles/20220615-160504-flutter-cached-network-image-test

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

flutter_keyboard_visibility

準備コマンド

flutter create hello_keyboard_visibility
cd hello_keyboard_visibility
flutter pub add flutter_keyboard_visibility

コード

hello_keyboard_visibility/lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return KeyboardDismissOnTap(
      child: KeyboardVisibilityBuilder(
        builder: (context, isKeyboardVisible) {
          return Scaffold(
            appBar: AppBar(title: const Text('AppBar Title')),
            body: Padding(
              padding: const EdgeInsets.all(20),
              child: Column(
                children: <Widget>[
                  Text(
                    isKeyboardVisible ? 'Visible' : 'Invisible',
                    style: Theme.of(context).textTheme.headline4,
                  ),
                  const SizedBox(height: 15),
                  const TextField(
                    decoration: InputDecoration(border: OutlineInputBorder()),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

実行コマンド

flutter run

実行結果

このスクラップは2023/01/10にクローズされました