Question 244678 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Search Bar Widget problem about Preferred Size Widget

I’m creating a mobile app by using flutter framework. I want to add a search bar to my home page. Home page and Search bar files are separate than each other. Here is my home_screen.dart file

import 'package:amazon/widget/search_bar_widget.dart';
import 'package:flutter/material.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: SearchBarWidget(),
      body: Center(
        child: Text("Home Screen"),
      ),
    );
  }
}

And here is my search_bar_widget.dart file:

import 'package:amazon/utils/constants.dart';
import 'package:flutter/material.dart';

class SearchBarWidget extends StatelessWidget with PreferredSizeWidget {
  SearchBarWidget({Key? key}) : preferredSize = Size.fromHeight(kAppBarHeight), super(key: key);

  @override
  final Size preferredSize;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.pink,
    );
  }
}

Here is the error message:The class 'PreferredSizeWidget' can't be used as a mixin because it's neither a mixin class nor a mixin.

I tried to change the class SearchBarWidget extends StatelessWidget with PreferredSizeWidget code into class SearchBarWidget extends StatelessWidget implements PreferredSizeWidget and it doesn’t give any error but still I can’t see any pink container. I also tried this code for the search_bar_widget.dart

class SearchBarWidget extends StatelessWidget {
  const SearchBarWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(80.0),
        child: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: <Color>[Colors.blue, Colors.pink],
            ),
          ),
          //child: const AppBarContent(),
        ),
      ),
      body: const Center(
        child: Text('Content'),
      ),
    );
  }
}

But this time home_screen.dart gives this error: The argument type 'SearchBarWidget' can't be assigned to the parameter type 'PreferredSizeWidget?'.

I would be grateful if you help.

Tags:

2

Answers


  1. 0

    maybe you could try this

    Add a Size to preferredSize, for example like this, that worked for me:

    @override
Size get preferredSize => const Size.fromHeight(kToolbarHeight);

    And also implement PreferredSizeWidget to your class

    class SearchBarWidget extends StatelessWidget implements PreferredSizeWidget

    Use kToolbarHeight as @Ampersanda proposed

    Login or Signup to reply.
  2. 0

    Fixing the PreferredSizeWidget Mixin Issue:
    Instead of using with (mixin) for PreferredSizeWidget, you should use implements since PreferredSizeWidget is an interface and not a mixin. Your initial attempt was on the right track

    search_bar_widget.dart:

    import 'package:flutter/material.dart';

class SearchBarWidget extends StatelessWidget implements PreferredSizeWidget {
  SearchBarWidget({Key? key}) : super(key: key);

  @override
  final Size preferredSize = Size.fromHeight(80.0); // Define your height here

  @override
  Widget build(BuildContext context) {
    return Container(
      height: preferredSize.height, // Make sure to give the container a height
      color: Colors.pink,
    );
  }
}

    Notes:

    1. Changed the class definition to use "implements PreferredSizeWidget".
    2. Set a defined height for the "preferredSize" property.
    3. Specified the height of the Container widget using "preferredSize.height".

    home_screen.dart:

    No changes needed.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search