Flutter

 

Android Studio

Flutter SDK archive

Flutter DropdownButton / DropdownButtonFormField 下拉選單

 

DropdownButton

import 'package:flutter/material.dart';

class dropdownButton extends StatefulWidget {
  @override
  _dropdownButtonState createState() => _dropdownButtonState();
}

class _dropdownButtonState extends State<dropdownButton> {
  List<DropdownMenuItem<String>> listDrop = [];
  String selected = "1";

  void loadData() {
    listDrop = [];
    listDrop.add(DropdownMenuItem(child: Text("item 1"), value: "1"));
    listDrop.add(DropdownMenuItem(child: Text("item 2"), value: "2"));
    listDrop.add(DropdownMenuItem(child: Text("item 3"), value: "3"));
    listDrop.add(DropdownMenuItem(child: Text("item 4"), value: "4"));
    listDrop.add(DropdownMenuItem(child: Text("item 5"), value: "5"));
  }

  @override
  Widget build(BuildContext context) {
    loadData();

    return Scaffold(
        body: Center(
      child: Column(children: [
        DropdownButton(
          dropdownColor: Colors.amber,
          style: TextStyle(color: Colors.white,),
          icon: Icon(Icons.arrow_drop_down_circle),
          elevation: 36,
          items: listDrop,
          value: selected,
          hint: Text("Select item..."),
          onChanged: (String? newValue) {
            setState(() {
              selected = newValue!;
            });
          },
        ),
      ]),
    ));
  }
}

DropdownButtonFormField

import 'package:flutter/material.dart';
import 'package:untitled/Constants.dart';

class dropdownButton extends StatefulWidget {
  @override
  _dropdownButtonState createState() => _dropdownButtonState();
}

class _dropdownButtonState extends State<dropdownButton> {
  List<DropdownMenuItem<String>> listDrop = [];
  String selected = "1";

  void loadData() {
    listDrop = [];
    listDrop.add(DropdownMenuItem(child: Text("item 1"), value: "1"));
    listDrop.add(DropdownMenuItem(child: Text("item 2"), value: "2"));
    listDrop.add(DropdownMenuItem(child: Text("item 3"), value: "3"));
    listDrop.add(DropdownMenuItem(child: Text("item 4"), value: "4"));
    listDrop.add(DropdownMenuItem(child: Text("item 5"), value: "5"));
  }

  @override
  Widget build(BuildContext context) {
    loadData();

    void Function() Button_OnClick = () {
      Navigator.pop(context);
    };

    return Scaffold(
      backgroundColor: appGreyColor,
        body: Center(
      child: Column(children: [
        DropdownButtonFormField(
          decoration: InputDecoration(
            icon: Icon(Icons.bug_report),
            labelText: "Select item...",
            labelStyle: TextStyle(
              color: Colors.black,
            ),
            contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(32.0),
            ),
            hintStyle: TextStyle(
              color: Colors.white,
            ),
          ),
          style: TextStyle(
            color: Colors.white,
          ),
          items: listDrop,
          onChanged: (String? newValue) {
            setState(() {
              selected = newValue!;
            });
          },
          dropdownColor: appBackgroundGreyColor,
          icon: Icon(Icons.arrow_drop_down_circle, color: Colors.white,),
        ),
      ]),
    ));
  }
}

Flutter 返回上一頁

Navigator.pop(context);

 

Flutter warning: [deprecation] get(int,int) in CamcorderProfile has been deprecated 排除

 

warning: [deprecation] get(int,int) in CamcorderProfile has been deprecated 排除

compileSdkVersion = 31
targetSdkVersion = 31

截錄:

• [Camera] CamcorderProfile deprecated in Android API level 31

Flutter Error: Cannot run with sound null safety, because the following dependencies 排除

Error: Cannot run with sound null safety, because the following dependencies 

Copy: --no-sound-null-safety

截錄

• Cannot run with sound null safety because dependencies don't support null safety

Flutter 拍照

 

添加相關依賴套件 （dependencies）

在調用照相機前，我們會需要將下列三個相關依賴添加於 pubspec.yaml 當中。
camera: 提供與設備照相機相關工具
path_provider: 查詢正確路徑儲存照片
path: 建立在任何平台上都可運作的路徑

dependencies:
  flutter:
    sdk: flutter
  camera:
  path_provider:
  path:    

根據 Flutter 官方教學文件

Tip:

• For android, You must have to update minSdkVersion to 21 (or higher).
• On iOS, lines below have to be added inside ios/Runner/Info.plist in order the access the camera.

• <key>NSCameraUsageDescription</key>
  <string>Explanation on why the camera access is needed.</string>

minSdkVersion 必須在21以上

為了解決這個問題，我們必須修改 Flutter 專案中 Android 的最低 SDK 版本。

在 Flutter 專案中，我們要修改的文件路徑為 PROJECT_NAME/android/app/build.gradle

def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
    localPropertiesFile.withReader('UTF-8') { reader ->
        localProperties.load(reader)
    }
}

def flutterRoot = localProperties.getProperty('flutter.sdk')
if (flutterRoot == null) {
    throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
}

def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
    flutterVersionCode = '1'
}

def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
    flutterVersionName = '1.0'
}

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

android {
    compileSdkVersion flutter.compileSdkVersion

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = '1.8'
    }

    sourceSets {
        main.java.srcDirs += 'src/main/kotlin'
    }

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.untitled"
        minSdkVersion 21 //flutter.minSdkVersion
        targetSdkVersion 30 //flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

    buildTypes {
        release {
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.debug
        }
    }
}

flutter {
    source '../..'
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
}

將minSdkVersion 修改為 21（或任何你需要的版本號）

main.dart

import 'package:flutter/material.dart';
import 'package:untitled1/TakePictureScreen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: _mainbody(),
      ),
    );
  }
}

class _mainbody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: Text("Camera"),
        onPressed: () {
          takePictureScreen_main();
        },
      ),
    );
  }
}

TakePictureScreen.dart

import 'dart:async';
import 'dart:io';
import 'package:camera/camera.dart';
import 'package:flutter/material.dart';

Future<void> takePictureScreen_main() async {
  // Ensure that plugin services are initialized so that `availableCameras()`
  // can be called before `runApp()`
  WidgetsFlutterBinding.ensureInitialized();

  // Obtain a list of the available cameras on the device.
  final cameras = await availableCameras();

  // Get a specific camera from the list of available cameras.
  final firstCamera = cameras.first;

  runApp(
    MaterialApp(
      theme: ThemeData.dark(),
      home: TakePictureScreen(
        // Pass the appropriate camera to the TakePictureScreen widget.
        camera: firstCamera,
      ),
    ),
  );
}

// A screen that allows users to take a picture using a given camera.
class TakePictureScreen extends StatefulWidget {
  const TakePictureScreen({
    Key? key,
    required this.camera,
  }) : super(key: key);

  final CameraDescription camera;

  @override
  TakePictureScreenState createState() => TakePictureScreenState();
}

class TakePictureScreenState extends State<TakePictureScreen> {
  late CameraController _controller;
  late Future<void> _initializeControllerFuture;

  @override
  void initState() {
    super.initState();
    // To display the current output from the Camera,
    // create a CameraController.
    _controller = CameraController(
      // Get a specific camera from the list of available cameras.
      widget.camera,
      // Define the resolution to use.
      ResolutionPreset.medium,
    );

    // Next, initialize the controller. This returns a Future.
    _initializeControllerFuture = _controller.initialize();
  }

  @override
  void dispose() {
    // Dispose of the controller when the widget is disposed.
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Take a picture')),
      // You must wait until the controller is initialized before displaying the
      // camera preview. Use a FutureBuilder to display a loading spinner until the
      // controller has finished initializing.
      body: FutureBuilder<void>(
        future: _initializeControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            // If the Future is complete, display the preview.
            return CameraPreview(_controller);
          } else {
            // Otherwise, display a loading indicator.
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        // Provide an onPressed callback.
        onPressed: () async {
          // Take the Picture in a try / catch block. If anything goes wrong,
          // catch the error.
          try {
            // Ensure that the camera is initialized.
            await _initializeControllerFuture;

            // Attempt to take a picture and get the file `image`
            // where it was saved.
            final image = await _controller.takePicture();

            // If the picture was taken, display it on a new screen.
            await Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => DisplayPictureScreen(
                  // Pass the automatically generated path to
                  // the DisplayPictureScreen widget.
                  imagePath: image.path,
                ),
              ),
            );
          } catch (e) {
            // If an error occurs, log the error to the console.
            print(e);
          }
        },
        child: const Icon(Icons.camera_alt),
      ),
    );
  }
}

// A widget that displays the picture taken by the user.
class DisplayPictureScreen extends StatelessWidget {
  final String imagePath;

  const DisplayPictureScreen({Key? key, required this.imagePath})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Display the Picture')),
      // The image is stored as a file on the device. Use the `Image.file`
      // constructor with the given path to display the image.
      body: Image.file(File(imagePath)),
    );
  }
}

參考:

• [Flutter] 如何使用照相機拍照、展示圖片

截錄 :

• [Flutter] 如何使用照相機拍照、展示圖片
• [已解決][Flutter] Manifest merger failed : uses-sdk:minSdkVersion 16 cannot be smaller than version 21 declared in library [:camera]

Flutter SnackBar 對話訊息

 

import 'package:flutter/material.dart';
import 'package:untitled/Constants.dart';

class detailpage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: appBackgroundGreyColor,
      body: _detailpage(),
    );
  }
}

class _detailpage extends StatelessWidget{
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: Text("Return"),
        onPressed: () {
          final snackBar = new SnackBar(content: new Text('顯示 SnackBar 訊息'));
          Scaffold.of(context).showSnackBar(snackBar);
        },
      ),
    );
  }
}

Flutter BottomNavigationBar 底部頁籤導航元件

 

import 'package:flutter/material.dart';
import 'package:untitled/Constants.dart';
import 'package:untitled/Page1.dart';
import 'package:untitled/Page2.dart';
import 'package:untitled/Page3.dart';

class detailpage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: appBackgroundGreyColor,
      body: _detailpage(),
    );
  }
}

class _detailpage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _detailpageState();
  }
}

class _detailpageState extends State<_detailpage> {
  int _currentIndex = 0; //Page預設值
  final List<Widget> _children = [page1(), page2(), page3()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Page 1")),
          BottomNavigationBarItem(icon: Icon(Icons.chair), title: Text("Page 2")),
          BottomNavigationBarItem(icon: Icon(Icons.add), title: Text("Page 3")),
        ],
        currentIndex: _currentIndex,
        backgroundColor: appDarkGreyColor,
        fixedColor: Colors.white,
        onTap: _onItemClick,
      ),
    );
  }

  //BottomNavigationBar 按下處理事件，更新設定當下索引值
  void _onItemClick(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

Flutter AppBar 功能列

 

import 'package:flutter/material.dart';
import 'package:untitled/Constants.dart';

class detailpage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          backgroundColor: appDarkGreyColor,
          centerTitle: true,
          title: Text("Title"),
          leading: IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {
              //點擊後 開啟右側導航元件
              //_scaffoldKey.currentState!.openDrawer();
            },
          ),
      ),
      body: _detailpage(),
    );
  }
}

class _detailpage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Detail Page");
  }
}

Flutter Drawer 導航元件

 

import 'package:flutter/material.dart';
import 'package:untitled/Constants.dart';
import 'package:untitled/page1.dart';

class detailpage extends StatelessWidget {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    List<String> _List = ['List1', 'List2', 'List3'];

    return Scaffold(
      key: _scaffoldKey,
      backgroundColor: appBackgroundGreyColor,
      drawer: Drawer(
          backgroundColor: appBackgroundGreyColor,
          child: ListView(
            children: <Widget>[
              DrawerHeader(
                child: Text(
                  "DrawerHeader",
                  style: TextStyle(color: Colors.white),
                ),
              ),
              ListTile(
                title: Text(
                  "Page 1",
                  style: TextStyle(color: Colors.white),
                ),
                subtitle: Text("Page 1"),
                onTap: () {
                  Navigator.pop(context);
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => page1())); //跳頁
                },
              ),
              ListTile(
                title: Text(
                  "Log Out",
                  style: TextStyle(color: Colors.white),
                ),
                subtitle: Text("Log Out"),
                onTap: () {
                  Navigator.pop(context);
                  Navigator.pop(context);
                },
              ),
            ],
          )),
      body: _detailpage(),
    );
  }
}

class _detailpage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("text");
  }
}

Flutter ConfirmDialog 對話視窗

 

enum ConfirmAction { ACCEPT, CANCEL }

Future<ConfirmAction?> confirmDialog(BuildContext context) async {
  /*
  Sample:
        onPressed: () async {
          final ConfirmAction? action = await confirmDialog(context);
          print("你選擇：$action");
        },
  */
  return showDialog<ConfirmAction>(
    context: context,
    barrierDismissible: false, //控制點擊對話框以外的區域是否隱藏對話框
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('確認取消對話視窗'),
        content: const Text('內容訊息'),
        actions: <Widget>[
          FlatButton(
            child: const Text('確認'),
            onPressed: () {
              Navigator.of(context).pop(ConfirmAction.ACCEPT);
            },
          ),
          FlatButton(
            child: const Text('取消'),
            onPressed: () {
              Navigator.of(context).pop(ConfirmAction.CANCEL);
            },
          )
        ],
      );
    },
  );
}

import 'package:flutter/material.dart';
import 'package:untitled/Constants.dart';

class detailpage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: appBackgroundGreyColor,
      body: _detailpage(),
    );
  }
}

class _detailpage extends StatelessWidget{
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: Text("Return"),
        onPressed: () async {

          final ConfirmAction? action = await confirmDialog(context);
          print("你選擇：$action");

          Navigator.pop(context);
        },
      ),
    );
  }
}

Flutter ShowAlert 對話視窗

 

Future<void> showAlert(BuildContext context, String title, String content) {
  /*
    Sample:
        onPressed: () {
          showAlert(context, "Title", "Content");
        },
   */
  return showDialog<void>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text(title),
        content: Text(content),
        actions: <Widget>[
          FlatButton(
            child: Text('確定'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

Flutter 簡易起手式

起始專案

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: _mainbody(),
      ),
    );
  }
}

class _mainbody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: Text("Hello Button"),
        onPressed: () {
          // ...do something...
          // ...
          // ...go to page2...
          //Navigator.push(context,
          //  MaterialPageRoute<void>(builder:(BuildContext context) {
          //    return page2() ;
          //})
        },
      ),
    );
  }
}

 StatelessWidget

import 'package:flutter/material.dart';

class page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: _page2()
    );
  }
}

class _page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body:Center(
          child: RaisedButton(
              child: Text("Home"),
              onPressed: () {
                // ...do someting...
                // ...
                // ...return homepage...
                //Navigator.pop(context);
              }),
        ),
    );
  }
}

Flutter TabBar 頁籤導航元件

 

TabBar

import 'package:flutter/material.dart';
import 'package:untitled/Page2.dart';  //TabBar 引入頁面
import 'package:untitled/Page3.dart';  //TabBar 引入頁面
import 'package:untitled/Constants.dart'; //常數

class page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Scaffold(
        body: _page1(),
      ),
    );
  }
}

class _page1 extends StatelessWidget {
  final List<Tab> myTabs = <Tab>[
    Tab(text: 'Tab1'),
    Tab(text: 'Tab2'),
  ];

  final pages = [page2(), page3()];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: myTabs.length,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: appDarkGreyColor,
            title: Text("title"),
            bottom: TabBar(
              tabs: myTabs,
            ),
          ),
          body: TabBarView(
            children: <Widget>[page2(), page3()],
          ),
        ),
      ),
    );
  }
}