Với SharedPreferences, bạn có thể định cấu hình ứng dụng Flutter của mình để ghi nhớ dữ liệu ngay cả sau khi người dùng chấm dứt hoạt động của họ. SharedPreferences có thể được sử dụng để lưu trữ dữ liệu quan trọng như mật khẩu, mã thông báo và dữ liệu quan hệ phức tạp.
Trong hướng dẫn này, chúng tôi sẽ trình bày cách duy trì và sửa đổi dữ liệu bằng SharedPreferences trong ứng dụng Flutter. gialaipc sẽ trình bày những điều sau đây với các ví dụ thực tế:
SharedPreferences trong Flutter là gì?
SharedPreferences là ứng dụng Android và iOS sử dụng để lưu trữ dữ liệu đơn giản trong không gian được phân bổ. Dữ liệu này tồn tại ngay cả khi ứng dụng tắt và khởi động lại; chúng ta vẫn có thể lấy lại giá trị như ban đầu.
Dữ liệu được lưu trữ trong SharedPreferences có thể được chỉnh sửa và xóa. SharedPreferences lưu trữ dữ liệu trong một cặp khóa-giá trị.
Để sử dụng SharedPreferences trong Flutter, một plugin có tên shared_preferences cho phép chúng tôi lưu trữ dữ liệu. Plugin kết thúc NSUserDefaults trên iOS và SharedPreferences trên Android.
Giàn giáo một dự án Flutter
Hãy xem qua cách dựng một dự án Flutter, thêm shared_preferences plugin cho một dự án Flutter và các phương pháp được plugin hiển thị cho chúng tôi.
Bạn sẽ cần phải cài đặt một số công cụ và mã nhị phân trên máy của mình, bao gồm cả Flutter SDK và Android Studio.
SDK Flutter
Để cài đặt Flutter SDK trên máy của chúng tôi, bạn cần chọn tệp nhị phân Flutter của mình theo máy của bạn bên dưới:
Sau khi cài đặt, bạn sẽ có Flutter CLI có sẵn trên toàn cầu trong hệ thống của mình. Chạy lệnh dưới đây để kiểm tra điều này:
➜ flutter -version Flutter 2.0.6 • channel secure • https://github.com/flutter/flutter.git Framework • revision 1d9032c7e1 (3 months in the past) • 2021-04-29 17:37:58 -0700 Engine • revision 05e680e202 Instruments • Dart 2.12.3
Phiên bản của bạn có thể khác với phiên bản của tôi nhưng bạn có thể xác minh rằng Flutter SDK đã được cài đặt thành công.
Android Studio
Chúng tôi sẽ phát triển cho hệ điều hành Android và chúng tôi sẽ cần một trình giả lập để kiểm tra các ứng dụng của chúng tôi khi đang chạy. Android Studio là IDE / SDK chính thức được sử dụng để xây dựng, thử nghiệm và xuất bản các ứng dụng Android. Truy cập trang internet chính thức để tải xuống và cài đặt Android Studio trên máy của bạn.
Để sử dụng Android Studio để phát triển các dự án Flutter, bạn cần cài đặt các plugin sau:
Để mở đầu một dự án Flutter, hãy chạy lệnh sau:
flutter create shared_pref
Lệnh này tạo một thư mục, shared_prefvà đặt một dự án Flutter bên trong nó. Bạn có thể mở dự án bằng VS Code hoặc Android Studio.
Đang cài đặt shared_preferences
Bây giờ chúng ta đã thiết lập và thiết lập Flutter SDK, đã đến lúc cài đặt shared_preferences cắm vào.
Mở pubspec.yaml tập tin và thêm shared_preferences bên trong dependencies tiết diện:
dependencies: flutter: sdk: flutter shared_preferences:
Điều này sẽ cài đặt phiên bản phụ thuộc mới nhất.
Để sử dụng shared_preferences plugin, chúng tôi phải nhập nó vào tệp của mình:
import ‘package deal:shared_preferences/shared_preferences.dart’;
Các shared_preferences plugin xuất một SharedPreferences lớp, có các phương thức có thể được sử dụng để thiết lập dữ liệu của các kiểu nguyên thủy khác nhau trong SharedPreferences. Nó có một phương pháp, getInstance, được sử dụng để tạo một phiên bản của SharedPreferences.
SharedPreferences prefs = await SharedPreferences.getInstance();
Các getInstance tạo và trả về một SharedPreferences ví dụ. Các prefs giữ ví dụ của SharedPreferences.
shared_preferences phương pháp
Trong phần này, chúng tôi sẽ trình bày cách thêm dữ liệu vào và lấy, chỉnh sửa và xóa dữ liệu khỏi SharedPreferences.
Thêm dữ liệu
Có thể thêm dữ liệu của các kiểu nguyên thủy vào SharedPreferences. Chúng ta có thể thêm các kiểu nguyên thủy sau:
Mỗi kiểu nguyên thủy có phương thức setter tương ứng. (Lưu ý: Khóa của cặp khóa-giá trị ở dạng chuỗi.)
Thêm int
prefs.setInt(‘counter’, 1);
Điều này thêm một int, 1, đến counter bảng SharedPreferences.
Thêm chuỗi
prefs.setString(‘counter’, “sure”);
Điều này thêm một chuỗi, “sure”, đến counter.
Thêm bool
prefs.setBool(‘counter’, true);
Điều này thêm một bool, true, đến counter.
Thêm đôi
prefs.setDouble(‘counter’, 10.2);
Điều này thêm một giá trị kép, 10.2, đến counter.
Truy xuất dữ liệu
Bây giờ, hãy xem cách chúng ta có thể lấy dữ liệu từ SharedPreferences. Vì chúng ta có các phương thức setter cho các kiểu nguyên thủy nên chúng ta có các phương thức getter để truy xuất dữ liệu.
Nhận dữ liệu int
int worth = prefs.getInt(‘counter’);
Các getInt phương thức được sử dụng để truy xuất một int worth từ SharedPreferences.
worth // 1
Nhận dữ liệu bool
bool worth = prefs.getBool(‘counter’);
Phương pháp này getBool trả về giá trị boolean từ SharedPreferences.
worth // true
Nhận dữ liệu kép
double worth = prefs.getDouble(‘counter’);
Các getDouble phương thức trả về một giá trị kép từ SharedPreferences.
worth // 10.2
Nhận dữ liệu chuỗi
string worth = prefs.getString(‘counter’);
Các getString phương thức trả về một giá trị chuỗi từ SharedPreferences.
worth // “sure”
null giá trị
Trong trường hợp dữ liệu không có trong SharedPreferences, null giá trị được trả về:
prefs.getInt(“_counter”) // null prefs.getBool(“_counter”) // null prefs.getString(“_counter”) // null prefs.getDouble(“_counter”) // null
Xóa dữ liệu
Để xóa dữ liệu khỏi SharedPreferences, chúng tôi sẽ sử dụng take away phương pháp. Khóa của dữ liệu được chuyển cho .take away để dữ liệu cặp khóa-giá trị trong SharedPreferences bị xóa.
prefs.take away(“counter”);
Đây, counter bên trong SharedPreferences bị xóa.
Xác minh rằng dữ liệu tồn tại
Chúng tôi có thể kiểm tra SharedPreferences để xem liệu dữ liệu có tồn tại trước khi chúng ta đọc hoặc ghi hay không. Để làm điều này, chúng tôi sẽ sử dụng containsKey phương pháp.
Các containsKey phương thức chấp nhận khóa của dữ liệu trong đối số của nó và sử dụng nó để kiểm tra xem khóa có tồn tại trong SharedPreferences hay không.
Phương thức trả về bool, true hoặc false:
prefs.containsKey(“counter”) // true
Trong ví dụ trên, counter tồn tại trong SharedPreferences. Đó là lý do tại sao nó trở lại true.
prefs.containsKey(“_counter”) // false
_counter không tồn tại, vì vậy nó trả về false.
Sử dụng shared_preferences trong Flutter
Theo mặc định, Flutter thêm một dự án truy cập bất cứ khi nào bạn xây dựng một dự án mới. Dự án bộ đếm này cho phép chúng tôi tăng bộ đếm khi FloatingActionButton bị ép buộc. Trạng thái hiện tại của bộ đếm được hiển thị khi nó đang được tăng lên.
import ‘package deal:flutter/materials.dart’; void foremost() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the foundation of your software. @override Widget construct(BuildContext context) { return MaterialApp( title: ‘Flutter Demo’, theme: ThemeData( primarySwatch: Colours.blue, ), dwelling: MyHomePage(title: ‘Flutter Demo Residence Web page’), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : tremendous(key: key); remaining String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget construct(BuildContext context) { return Scaffold( appBar: AppBar( title: Textual content(widget.title), ), physique: Heart( baby: Column( mainAxisAlignment: MainAxisAlignment.heart, youngsters: <Widget>[ Text( ‘You have pushed the button this many times:’, ), Text( ‘$_counter’, style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: ‘Increment’, baby: Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for construct strategies. ); } }
Các counter trở lại 0 khi ứng dụng bị phá hủy hoặc bị đóng. Chúng tôi sẽ sử dụng SharedPreferences để duy trì trạng thái của bộ đếm để giá trị bộ đếm bắt đầu từ vị trí trước khi ứng dụng bị tắt.
Hãy làm nó.
Đầu tiên, nhập shared_preferences cắm vào:
import ‘package deal:flutter/materials.dart’; import ‘package deal:shared_preferences/shared_preferences.dart’;
Tiếp theo, thêm một initState phương pháp vòng đời trong MyHomePageState tiện ích con. Phương thức vòng đời này được gọi khi một widget trạng thái đang được khởi tạo.
Tại đây, chúng tôi sẽ tải bộ đếm từ SharedPreferences. Nếu có, chúng tôi sẽ đặt nó làm giá trị bộ đếm. Nếu không, chúng ta gán 0 đến quầy:
void loadCounter() async { SharedPreferences prefs = await SharedPreferences.getInstance(); setState(() { _counter = (prefs.getInt(‘counter’) ?? 0); }); } @override void initState() { tremendous.initState(); loadCounter(); }
Bây giờ chúng ta hãy làm _incrementCounter chức năng một async hàm số. Bên trong nó, chúng ta sẽ lấy bộ đếm từ SharedPreferences, tăng nó, sau đó đặt bộ đếm với số gia và cũng đặt số gia trong SharedPreferences.
void _incrementCounter() async { SharedPreferences prefs = await SharedPreferences.getInstance(); setState(() { _counter = ((prefs.getInt(‘counter’) ?? 0) + 1); prefs.setInt(‘counter’, _counter); }); }
Bây giờ ứng dụng Flutter của chúng tôi có thể nhớ giá trị cuối cùng của bộ đếm khi tắt và khởi động lại.
Thử nghiệm ứng dụng Flutter của chúng tôi
Đầu tiên, hãy bắt đầu ứng dụng của chúng tôi:
Tăng đến bảy:
Bây giờ chúng ta hãy thử giết ứng dụng:
Khi khởi động lại ứng dụng, số nút vẫn sẽ hiển thị là 7.
Triển khai màn hình giật gân bằng SharedPreferences
Chúng ta có thể sử dụng SharedPreferences để triển khai màn hình giật gân trong Flutter.
Màn hình giật gân xuất hiện khi một ứng dụng được khởi chạy lần đầu tiên và không xuất hiện lại khi ứng dụng được khởi chạy sau đó.
Giả sử chúng ta có một ứng dụng có hai màn hình: ProfileScreen và SplashScreen. Chúng tôi sẽ móc vào initState phương pháp trong MyApp tiện ích con. Từ đó, chúng tôi sẽ luôn kiểm tra dữ liệu trong SharedPreferences – giả sử newLaunch. Nếu điều này newLaunch Là true, NS SplashScreen được hiển thị và sau một thời gian, ProfileScreen được hiển thị. Các SplashScreen sẽ thiết lập lại newLaunch đến false.
Nếu newLaunch Là false, NS SplashScreen được bỏ qua và ProfileScreen được hiển thị.
Hãy mã màn hình giật gân và hồ sơ của chúng tôi!
Tạo một thư mục, screens, bên trong lib thư mục:
mkdir lib/screens contact lib/screens/ProfileScreen.dart lib/screens/SplashScreen.dart
Hãy chỉnh sửa MyApp widget như sau:
import ‘package deal:flutter/materials.dart’; import ‘package deal:shared_preferences/shared_preferences.dart’; import ‘screens/ProfileScreen.dart’; import ‘screens/SplashScreen.dart’; void foremost() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the foundation of your software. @override Widget construct(BuildContext context) { return MaterialApp( title: ‘SharedPreferences Demo’, theme: ThemeData( primarySwatch: Colours.blue, ), dwelling: LoadPage() //MyHomePage(title: ‘SharedPreferences Demo’), ); } } class LoadPage extends StatefulWidget { LoadPage({Key key}) : tremendous(key: key); @override LoadPageState createState() => LoadPageState(); } class LoadPageState extends State { var newLaunch; @override void initState() { tremendous.initState(); loadNewLaunch(); } loadNewLaunch() async { SharedPreferences prefs = await SharedPreferences.getInstance(); setState(() { bool _newLaunch = ((prefs.getBool(‘newLaunch’) ?? true)); newLaunch = _newLaunch; }); } @override Widget construct(BuildContext context) { return Scaffold(physique: newLaunch ? SplashScreen() : ProfileScreen()); } }
Chúng ta có LoadPage widget và widget trạng thái của nó, LoadPageState. Ở trong LoadPageState, chúng tôi có một phương pháp, loadNewLaunch, kiểm tra để có được newLaunch dữ liệu từ SharedPrefs và gán nó cho newLaunch biến số đưa ra.
bên trong construct phương pháp của LoadPageState, widget kiểm tra newLaunch tình trạng. Nếu trạng thái là true, điều đó có nghĩa là ứng dụng đang khởi chạy lần đầu tiên và SplashScreen tiện ích con được hiển thị. Nếu không true, NS ProfileScreen được hiển thị.
Hãy mã hóa SplashScreen tiện ích con:
import ‘dart:async’; import ‘package deal:shared_preferences/shared_preferences.dart’; import ‘package deal:flutter/materials.dart’; import ‘ProfileScreen.dart’; class SplashScreen extends StatefulWidget { SplashScreen({Key key}) : tremendous(key: key); @override _SplashScreenState createState() => _SplashScreenState(); } class _SplashScreenState extends State<SplashScreen> { resetNewLaunch() async { SharedPreferences prefs = await SharedPreferences.getInstance(); if (prefs.containsKey(“newLaunch”)) { prefs.setBool(‘newLaunch’, false); } else { prefs.setBool(‘newLaunch’, false); } } @override void initState() { tremendous.initState(); Timer( Period(seconds: 3), () => Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) { resetNewLaunch(); return ProfileScreen(); }))); } @override Widget construct(BuildContext context) { return Scaffold( physique: Container( colour: Colours.blue, baby: Heart( baby: Column( mainAxisAlignment: MainAxisAlignment.heart, youngsters: <Widget>[ Text(‘Splash Screen’, style: new TextStyle(color: Colors.white, fontSize: 40)), ], ), ) ) ); } }
Các resetNewLaunch phương pháp đặt newLaunch dữ liệu trong SharedPrefs để false.
bên trong initState phương pháp, SplashScreen gọi cho resetNewLaunch phương pháp để thiết lập newLaunch dữ liệu để false trong SharedPrefs. Điều này sẽ khiến ứng dụng chỉ hiển thị ProfileScreen khi ứng dụng được khởi chạy sau đó.
Mã hẹn giờ đợi trong ba giây trước khi ProfileScreen được hiển thị.
Bây giờ chúng ta hãy mã hóa ProfileScreen:
import ‘package deal:flutter/materials.dart’; import ‘package deal:shared_preferences/shared_preferences.dart’; class ProfileScreen extends StatefulWidget { ProfileScreen({Key key}) : tremendous(key: key); @override _ProfileScreenState createState() => _ProfileScreenState(); } class _ProfileScreenState extends State<ProfileScreen> { clearSharedPrefs() async { SharedPreferences prefs = await SharedPreferences.getInstance(); prefs.take away(‘newLaunch’); } @override Widget construct(BuildContext context) { return Scaffold( appBar: AppBar( title: Textual content(“Profile”), ), physique: Container( baby: Heart( baby: Column( mainAxisAlignment: MainAxisAlignment.heart, youngsters: <Widget>[ Text(‘Profile Screen’, style: new TextStyle(fontSize: 40)), RaisedButton( child: Text(“Clear SharedPrefs”), onPressed: clearSharedPrefs, ) ], ), ), )); } }
Không có gì nhiều để đi qua đây. Chúng ta có một Xóa SharedPrefs nút này xóa newLaunch dữ liệu trong SharedPrefs. Hành động này sẽ làm cho ứng dụng hiển thị SplashScreen vào lần tiếp theo nó được khởi chạy.
Kiểm tra màn hình giật gân của chúng tôi
Màn hình giật gân và màn hình hồ sơ sẽ trông như sau trong lần khởi chạy đầu tiên sau khi cài đặt:
SplashScreen hiển thị đầu tiên, tiếp theo là ProfileScreen.
Các lần khởi chạy tiếp theo sẽ hiển thị các màn hình sau:
SplashScreen sẽ không bao giờ xuất hiện nữa, trong khi ProfileScreen xuất hiện thẳng.
Sự kết luận
Trong hướng dẫn này, chúng tôi đã đề cập đến SharedPreferences là gì và cách nó được sử dụng trong các ứng dụng Android và iOS. Chúng tôi cũng giới thiệu shared_preferences và học cách thiết lập Flutter với SharedPreferences.
Tiếp theo, chúng tôi đã học cách nhập shared_preferences plugin, đã hướng dẫn cách khởi tạo phiên bản của nó và xem xét các phương thức của nó cũng như những gì tất cả chúng làm. Chúng tôi đã sửa đổi một dự án bộ đếm Flutter bình thường để chỉ ra cách sử dụng shared_preferences plugin để duy trì giá trị bộ đếm và truy xuất nó sau khi ứng dụng đã bị hủy và khởi động lại.
Mã nguồn cho tất cả các ví dụ trong hướng dẫn này có sẵn trên GitHub.
