フロート アクション ボタンをクリックすると、2 つの機能を実行するボトム シートが作成されます。
1-ボトムシートポップアップ。
2- クリックしたときにボトムシートのフォームが有効な場合、データをデータベースに保存します。
私はフリーズしたブロックを使用しています。フロートアクションボタンをクリックすると、ブロックに真の値が与えられます。フォームに入力すると、フロートアクションボタンをクリックすると有効になり、フォームはデータベースに保存され、ブロックはfalseの値を取得します。一番下のシートが開いていてフォームが検証されていないときにボタンをもう一度クリックすると、「この問題を修正する必要があります」という一番下のシートが再び開かれます。一番下のシートが閉じているときに、ブロックに偽の値を与えます。
キュビット状態:
abstract class HomeState with _$HomeState {
const factory HomeState({
required Note inputTextValue,
required bool isClicked,
required int radioValue
}) = AddNewNoteClicked;
factory HomeState.init() => HomeState(
inputTextValue: Note(textInput: ''),
isClicked: false,
radioValue: 1,
);
}
キュビットコードは次のとおりです。
class HomeCubit extends Cubit<HomeState> {
HomeCubit() : super(HomeState.init());
void addNewNoteButton({required bool isClicked}) {
//! true && valid
if (isClicked == true && state.inputTextValue.input.isRight()) {
//! make it false
//! save to database
_database();
return emit(state.copyWith(isClicked: false));
} else if (isClicked == true && state.inputTextValue.input.isLeft()) {
} else {
return emit(state.copyWith(isClicked: isClicked));
}
} }
ボトムシートのコードは次のとおりです。
class HomePage extends StatelessWidget {
const HomePage();
@override
Widget build(BuildContext context) {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
return BlocListener<HomeCubit, HomeState>(
listener: (context, state) {
if (state.isClicked) {
_scaffoldKey.currentState!
.showBottomSheet(
(context) => const AddNewNoteBottomSheet(),
)
.closed
.then((value) {
context.read<HomeCubit>().addNewNoteButton(isClicked: false);
});
}
},
child: DefaultTabController(
length: 3,
child: Scaffold(
key: _scaffoldKey,
// add note float action button
floatingActionButton: InkWell(
onTap: () {
context.read<HomeCubit>().addNewNoteButton(isClicked: true);
},
// for float action button
// icon shape
child: Container(
// add note icon
child: Icon(
// state.showSaveIconState ? Icons.save :
Icons.add,
color: const Color(whiteColor),
size: 9.h,
),
),
),
),
),
);
}
}