在 flutter 中找不到材料小部件

Question

找到了这个无材质小部件的屏幕截图

我尝试像下面的代码一样添加星星 RateBar，但我得到一个错误，没有找到材料小部件。 我需要做的是，当我按下这个 flatButton 时，我得到了一个 window 来为订单评分并提交这个费率，我该如何通过下面的代码来做到这一点，或者告诉我如何处理它

这是 StarRating 的小部件

import 'package:flutter/material.dart';

typedef void RatingChangeCallback(double rating);

class StarRating extends StatelessWidget {
  final int starCount;
  final double rating;
  final RatingChangeCallback onRatingchanged;
  final Color color;

  StarRating({this.starCount=5, this.rating = .0, this.onRatingchanged, this.color});

  Widget buildStar(BuildContext context, int index){
    Icon icon;
    if (index >= rating) {
      icon = Icon(
        Icons.star_border,
        color: Theme.of(context).buttonColor
        );
    }
    else if(index > rating - 1 && index < rating){
      icon = Icon(
        Icons.star_half,
        color: Theme.of(context).primaryColor,
      );
    }else{
      icon = Icon(
        Icons.stars,
        color: Theme.of(context).primaryColor,
      );
    }
    return InkResponse(
      onTap: onRatingchanged==null ? null : ()=> onRatingchanged(index+1.0),
      child: icon,
    );
  }
  @override
  Widget build(BuildContext context) {
    return Row(
      children: List.generate(starCount, (index)=>buildStar(context, index)),
    );
  }
}

这是查看starBar的屏幕：

import 'package:felsaree/widgets/star.rating.dart';
import 'package:flutter/material.dart';
class StarRatingScreen extends StatefulWidget {
static const routeName = '/starRating';

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

class _StarRatingScreenState extends State<StarRatingScreen> {
  double rating =3.5;
  @override
  Widget build(BuildContext context) {

    return StarRating(
      rating: rating,
      onRatingchanged: (rating) => setState(() => this.rating = rating),
    );
  }
}

并且在通过平面按钮的 orderDetails 屏幕中，我需要显示此星级：

    import 'package:felsaree/providers/order_provider.dart';
import 'package:felsaree/screens/star_rating_screen.dart';
import 'package:felsaree/widgets/star.rating.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';

class OrderDetails extends StatefulWidget {
  static const routeName = '/orderDetails';

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

class _OrderDetailsState extends State<OrderDetails> {
  double rating = 3.5;

  // Widget ratingChange(double rating){
  //  return StarRating(
  //    rating: rating, 
  //    onRatingchanged: (rating)=>this.rating = rating,);
  // }

  @override
  Widget build(BuildContext context) {
    final  mediaQuery = MediaQuery.of(context).size.height;
    final orderId = ModalRoute.of(context).settings.arguments as int;
    final orderProvider = Provider.of<OrderProvider>(context, listen: false);
    final order = orderProvider.findOrderById(orderId);
    AppBar appBar = AppBar(title: Text(order.restaurantName),);
    double _totalPrice =orderProvider.totalItemsPrice(order.orderItems);
    bool _isAddress = orderProvider.checkUserAdress(order.address);
    return Scaffold(
      appBar: appBar,
      body: Column(
          children: <Widget>[
            Card(
              elevation: 4,
              margin: EdgeInsets.all(10),
              child: Padding(
                padding: EdgeInsets.all(10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Column(
                      children: <Widget>[
                        Text(order.id.toString()),
                        SizedBox(height: 4,),
                        Text(order.restaurantName),
                        SizedBox(height: 4,),
                        Text(order.branchName),
                        SizedBox(height: 4,),
                      ],
                    ),
                    Column(
                      children: <Widget>[
                        Text(DateFormat.yMd().format(DateTime.now())),
                        SizedBox(height: 15,),
                        Text('InProgress'),
                        SizedBox(height: 15,)
                      ],
                    )
                  ],
                ),),
            ),
            Container(
              margin: EdgeInsets.all(10),
              padding: EdgeInsets.all(10),
              decoration: BoxDecoration(
                color: Colors.grey[100],
                border: Border.all(width: 2, color: Colors.grey)
              ) ,
              child: Column(
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('Price'),
                      Text('${_totalPrice}L.E'),
                      Text('Total: ${order.price}L.E')
                    ],
                  ),
                  SizedBox(height: 10,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('PC Discount'),
                      Text('${order.discountValue}L.E'),
                      Text(''),
                    ],
                  ),
                   SizedBox(height: 10,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('service Tax'),
                      Text('${order.serviceTax}L.E'),
                      Text(''),
                    ],
                  ),
                  SizedBox(height: 10,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('Delivery'),
                      Text('${order.delivery}L.E'),
                      Text(''),
                    ],
                  ),
                  SizedBox(height: 10,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('Vat'),
                      Text('${order.vatAmount}L.E'),
                      Text(''),
                    ],
                  ),
                ],
              ),
            ),
            Container(
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(color: Colors.grey),
                borderRadius: BorderRadius.circular(10),
              ),
              padding: EdgeInsets.all(10),
              margin: EdgeInsets.only(bottom: 20),
              height: (mediaQuery
                      - appBar.preferredSize.height
                      - MediaQuery.of(context).padding.top)*0.30,
              width: MediaQuery.of(context).size.width*.8,
              child: ListView.builder(
                itemCount: order.orderItems.length,
                itemBuilder: (ctx, index){
                final item = order.orderItems[index];
                if(item.userComments == ''){
                 String  userComment= 'no comment';
                 item.userComments = userComment;
                }

                return ListTile(
                  leading: CircleAvatar(
                    backgroundImage: NetworkImage(item.image,),
                  ),
                  title: Text(item.itemName),
                  subtitle: Text('count: ${item.count}'),               
                  trailing: Text(item.userComments),
                );
                }
              ),
            ),
            Container(
              width: double.infinity,
              margin: EdgeInsets.only(right: 10, left: 10),
              padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
              color: Colors.grey[100],
              child: Text('Delivery Address', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),),
            ),
            SizedBox(height: 8),
            Container(
              width: double.infinity,
              padding: EdgeInsets.all(10),
              margin: EdgeInsets.all(10),
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey[100])
              ),
              child: _isAddress? Text(order.address) : Text('no address found'),
            ),
            FlatButton(
              onPressed: ()=>Navigator.of(context).pushNamed(StarRatingScreen.routeName),
              child: Text('Rate The Order', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),))
          ],  
        ),   
    );
  }
}

Answer 1

这可以通过确保您的 main 包含 MaterialApp() 和 Scaffold() 作为小部件的祖先来解决，如下所示：

void main() {
      runApp(MaterialApp(
        home: Scaffold(
          appBar: AppBar(),
          body: YourWidget(),
        ),
      ));
    }

如果出于某种原因您不想使用 MaterialApp... 您可以使用 Material()：

void main() {
      runApp(
        home: Scaffold(
          appBar: AppBar(),
          body: Material( child: YourWidget()),
        ),
      );
    }