2021年12月29日 星期三

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,),
),
]),
));
}
}



2021年12月16日 星期四

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

image



截錄:


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

enter image description here


enter image description here



截錄


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)),
);
}
}


參考:

截錄 :


2021年12月15日 星期三

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()],
),
),
),
);
}
}