Thiết kế website giá rẻ

Question

Here, In my filters screen, I have one option as Vehicles. I want to display only vehicles in my Vertical Screen if this option is true. And if it is false, i want to display all the images. Im loading data from the firebase realtime database. The tabscreen.dart has access to the Drawer and through that drawer, it is going to the filters screen.

//firebase_database_service.dart
// ignore_for_file: avoid_print
import 'package:firebase_database/firebase_database.dart';
import 'package:task2/models/screen_images.dart';

class FirebaseDatabaseService {
  static Future<List<ScreenImages>> getImageDataFromDatabase({required int startIndex, required int pageSize}) async {
    try {
      List<ScreenImages> imageDataList = [];
      DatabaseReference databaseReference = FirebaseDatabase.instance.ref().child('imageUrls');
      DataSnapshot dataSnapshot = await databaseReference.orderByKey().startAt(startIndex.toString()).limitToFirst(pageSize).once().then((event) => event.snapshot);
      if (dataSnapshot.value != null) {
        dynamic data = dataSnapshot.value;
        if (data is Map<dynamic, dynamic>) {
          data.forEach((key, value) {
            if (value is Map<dynamic, dynamic> &&
                value.containsKey('imageUrl') &&
                value.containsKey('First_Name')&&
                value.containsKey('Last_Name')&&
                value.containsKey('isVehicle')
                ) {
              imageDataList.add(
                ScreenImages(
                  imageUrl: value['imageUrl'],
                  firstname: value['First_Name'],
                  lastname: value['Last_Name'],
                  isVehicle: value['isVehicle']
                ),
              );
            }
          });
        } else {
          print('Error: Data is not of type Map<dynamic, dynamic>');
        }
      }
      return imageDataList;
    } catch (e) {
      print('Error retrieving image data from database: $e');
      return [];
    }
  }
}

screen_images.dart
class ScreenImages {
  final String imageUrl;
  final String firstname;
  final String lastname;
  final bool isVehicle;

  ScreenImages(
      {required this.imageUrl,
      required this.firstname,
      required this.lastname,
      required this.isVehicle});

  factory ScreenImages.fromMap(Map<String, dynamic> map) {
    return ScreenImages(
        imageUrl: map['imageUrl'],
        firstname: map['First_Name'],
        lastname: map['Last_Name'],
        isVehicle: map['isVehicle']
    );
  }
}

//tabs.dart
// ignore_for_file: library_private_types_in_public_api

import 'package:flutter/material.dart';
import 'package:task2/screens/filters.dart';
import 'package:task2/screens/horizontal_screen.dart';
import 'package:task2/screens/vertical_screen.dart';
import 'package:task2/widgets/main_drawer.dart';

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

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

class _TabsState extends State<TabsScreen> {
  int _selectedIndex = 0;

  final List<Widget> _screens = [
    const VerticalScreen(),
    const HorizontalScreen(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  void _setScreen(String identifier) async {
    Navigator.of(context).pop();
    if (identifier == 'filters') {
      final result = await Navigator.of(context).push(
        MaterialPageRoute(
          builder: (ctx) => const FiltersScreen(),
        ),
      );
      print(result);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:
            Text(_selectedIndex == 0 ? 'Vertical Screen' : 'Horizontal Screen'),
      ),
      drawer: MainDrawer(
        onSelectScreen: _setScreen,
      ),
      body: _screens[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.arrow_upward),
            label: 'Vertical',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.arrow_forward),
            label: 'Horizontal',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

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

class MainDrawer extends StatelessWidget {
  const MainDrawer({super.key, required this.onSelectScreen});

  final void Function(String identifier) onSelectScreen;

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: [
          DrawerHeader(
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
                gradient: LinearGradient(
              colors: [
                Theme.of(context).colorScheme.primaryContainer,
                Theme.of(context).colorScheme.primaryContainer.withOpacity(0.8),
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            )),
            child: Row(
              children: [
                Icon(
                  Icons.settings,
                  size: 48,
                  color: Theme.of(context).colorScheme.primary,
                ),
                const SizedBox(
                  width: 18,
                ),
                Text(
                  'Options',
                  style: Theme.of(context).textTheme.titleLarge!.copyWith(
                        color: Theme.of(context).colorScheme.primary,
                      ),
                ),
              ],
            ),
          ),
          ListTile(
            leading: Icon(
              Icons.category,
              size: 26,
              color: Theme.of(context).colorScheme.onBackground,
            ),
            title: Text(
              'Categories',
              style: Theme.of(context).textTheme.titleSmall!.copyWith(
                  color: Theme.of(context).colorScheme.onBackground,
                  fontSize: 24),
            ),
            onTap: () {
              onSelectScreen('categories');
            },
          ),
          ListTile(
            leading: Icon(
              Icons.filter_alt_sharp,
              size: 26,
              color: Theme.of(context).colorScheme.onBackground,
            ),
            title: Text(
              'Filters',
              style: Theme.of(context).textTheme.titleSmall!.copyWith(
                  color: Theme.of(context).colorScheme.onBackground,
                  fontSize: 24),
            ),
            onTap: () {
              onSelectScreen('filters');
            },
          ),
        ],
      ),
    );
  }
}

//filters_screen.dart
// ignore_for_file: deprecated_member_use

import 'package:flutter/material.dart';

enum Filter { vehicle }

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

  @override
  State<StatefulWidget> createState() {
    return _FiltersScreenState();
  }
}

class _FiltersScreenState extends State<FiltersScreen> {
  var _vehicleFilterSet = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Your Filters',
        ),
      ),
      body: WillPopScope(
        onWillPop: () async{
          Navigator.of(context).pop({
            Filter.vehicle: _vehicleFilterSet,
          });
          return false;
        },
        child: Column(
          children: [
            SwitchListTile(
              value: _vehicleFilterSet,
              onChanged: (isChecked) {
                setState(() {
                  _vehicleFilterSet = isChecked;
                });
              },
              title: Text(
                'Vehicle',
                style: Theme.of(context).textTheme.titleLarge!.copyWith(
                      color: Theme.of(context).colorScheme.onBackground,
                    ),
              ),
              subtitle: Text(
                'Only include vehicles',
                style: Theme.of(context).textTheme.labelMedium!.copyWith(
                      color: Theme.of(context).colorScheme.onBackground,
                    ),
              ),
              activeColor: Theme.of(context).colorScheme.tertiary,
              contentPadding: const EdgeInsets.only(left: 34, right: 22),
            ),
          ],
        ),
      ),
    );
  }
}

//Vertical_screen.dart
// ignore_for_file: library_private_types_in_public_api

import 'package:flutter/material.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
import 'package:task2/models/screen_images.dart';
import 'package:task2/screens/item_details.dart';
import 'package:task2/widgets/vertical_items.dart';
import 'package:task2/data/firebase_database_service.dart';

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

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

class _VerticalScreenState extends State<VerticalScreen> {
  final PagingController<int, ScreenImages> _pagingController =
      PagingController(firstPageKey: 0);

  @override
  void initState() {
    super.initState();
    _pagingController.addPageRequestListener((pageKey) {
      _fetchPage(pageKey);
    });
  }

  @override
  void dispose() {
    _pagingController.dispose();
    super.dispose();
  }

  Future<void> _fetchPage(int pageKey) async {
    try {
      final newData = await FirebaseDatabaseService.getImageDataFromDatabase(
        startIndex: pageKey,
        pageSize: 20,
      );
      final isLastPage = newData.isEmpty;
      if (isLastPage) {
        if (mounted) {
          _pagingController.appendLastPage(newData);
        }
      } else {
        if (mounted) {
          final nextPageKey = pageKey + newData.length;
          _pagingController.appendPage(newData, nextPageKey);
        }
      }
    } catch (error) {
      if (mounted) {
        _pagingController.error = error;
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PagedListView<int, ScreenImages>(
        pagingController: _pagingController,
        builderDelegate: PagedChildBuilderDelegate<ScreenImages>(
          itemBuilder: (context, item, index) => VerticalItems(
            imageUrl: item.imageUrl,
            firstname: item.firstname,
            lastname: item.lastname,
            onSelectItem: (screenImages) {
              selectItem(context, screenImages);
            },
            screenImages: item,
          ),
        ),
      ),
    );
  }

  void selectItem(BuildContext context, ScreenImages screenImages) {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (ctx) => ItemDetailsScreen(screenImages: screenImages),
      ),
    );
  }
}

Thiết kế website giá rẻ

Danh mục

Applying Filters based on boolean value in Flutter app