Создайте пользовательский виджет флаттера с настраиваемыми свойствами верхней панели

#flutter #flutter-layout

Вопрос:

Я должен нарисовать верхнюю панель, показанную ниже, в flutter, чтобы она отображалась в приложении, в ней должно быть 3 кнопки и текстовое поле поиска, и где должен быть нарисован фон, как показано на рисунке, у вас есть фрагмент кода для этого?Виджет ниже позволяет отображать панель мониторинга пользователя в приложении flutter,но я должен вставить указанное меню вверху

Код Флаттера:

 //List of books user Listlt;Bookgt;? booklistuser; Listlt;Bookgt;? booklistdashboard;  class DashBoardPage extends StatefulWidget {  DashBoardPage({Key? key}) : super(key: key);  @override  _DashBoardPageState createState() =gt; _DashBoardPageState(); }  class _DashBoardPageState extends Statelt;DashBoardPagegt; {  var totmessage = 0;   Futurelt;boolgt; getData() async {  var u = new Utente();  totmessage = await u.countmessageuser();  booklistuser = await Book.getbooklist(false);  booklistdashboard = await Book.getbooklist(true);  return true;  }   @override  Widget build(BuildContext context) {  return FutureBuilderlt;boolgt;(  future: getData(),  builder: (BuildContext context, AsyncSnapshotlt;boolgt; snapshot) {  if (!snapshot.hasData) {  return const SizedBox();  } else {  return Scaffold(  appBar: AppBar(  toolbarHeight: 90, // Set this height  flexibleSpace: Container(  color: '#AC9359'.toColor(),  child: Column(  children: [  Padding(  padding: EdgeInsets.only(right: 10.0),  child: RawMaterialButton(  onPressed: () {},  elevation: 4.0,  fillColor: '#FBFEE4'.toColor(),  child: Icon(  Icons.mail,  size: 15.0,  ),  shape: CircleBorder(),  ),  ),  Padding(  padding: EdgeInsets.only(right: 5.0),  child: RawMaterialButton(  onPressed: () {},  elevation: 2.0,  fillColor: '#FBFEE4'.toColor(),  child: Icon(  Icons.supervised_user_circle_outlined,  size: 15.0,  ),  shape: CircleBorder(),  ),  ),  ],  ),  ),  ),  /*AppBar(  backgroundColor: '#AC9359'.toColor(),  automaticallyImplyLeading: false,  elevation: 200.0,  leading: TextField(  decoration: InputDecoration(  border: OutlineInputBorder(  borderRadius: BorderRadius.circular(10.0),  ),  filled: true,  hintStyle: TextStyle(color: Colors.grey[800]),  hintText: "Type in your text",  fillColor: Colors.white70),  ),  actions: lt;Widgetgt;[   Padding(  padding: EdgeInsets.only(right: 10.0),  child: RawMaterialButton(  onPressed: () {},  elevation: 4.0,  fillColor: '#FBFEE4'.toColor(),  child: Icon(  Icons.mail,  size: 15.0,  ),   shape: CircleBorder(),  ),  ),  Padding(  padding: EdgeInsets.only(right: 5.0),  child: RawMaterialButton(  onPressed: () {},  elevation: 2.0,  fillColor: '#FBFEE4'.toColor(),  child: Icon(  Icons.supervised_user_circle_outlined,  size: 15.0,  ),  shape: CircleBorder(),  ),  ),  ],  iconTheme: IconThemeData(color: Colors.black),  ),*/  drawer: NavigationDrawerWidget(),  body: Builder(  builder: (context) =gt; Container(  margin: const EdgeInsets.only(left: 10.0, top: 20.0),  child: ListView(  children: lt;Widgetgt;[  Text("Dashboard",  style: TextStyle(  fontSize: 25.0,  fontWeight: FontWeight.bold,  fontFamily: "Roboto",  color: '#448BB5'.toColor())),  Center(  child: Row(  children: lt;Widgetgt;[  SizedBox(width: 4),  Container(  height: 90,  width: 90,  child: Center(  child: Image.asset('assets/libri.png'),  ),  ),  SizedBox(width: 4),  InkWell(  onTap: () {  Navigator.push(  context,  MaterialPageRoute(  builder: (context) =gt;  MarketPlacePage()),  );  },  child: Container(  height: 90,  width: 90,  child: Center(  child: Image.asset('assets/market.png'),  ),  ),  ),  SizedBox(width: 4),  Container(  height: 90,  width: 90,  child: Center(  child: Image.asset('assets/bacheca.png'),  ),  ),  SizedBox(width: 4),  Container(  height: 90,  width: 90,  child: Center(  child: Image.asset('assets/messaggi.png'),  ),  ),  ],  )),  SizedBox(height: 10),  Text(  "credito: 22 euro | hai "    totmessage.toString()    " nuovi messaggi",  style: TextStyle(  fontSize: 18.0,  fontWeight: FontWeight.bold,  fontFamily: "Roboto",  color: '#448BB5'.toColor())),  SizedBox(height: 20),  Text("I tuoi libri",  style: TextStyle(  fontSize: 25.0,  fontWeight: FontWeight.bold,  fontFamily: "Roboto",  color: '#448BB5'.toColor())),  new SingleChildScrollView(  child: Container(  height: 220,  child: new ListView.builder(  shrinkWrap: true,  scrollDirection: Axis.horizontal,  itemCount: booklistuser!.length,  itemBuilder:  (BuildContext context, int index) {  return new Column(  mainAxisAlignment:  MainAxisAlignment.center,  crossAxisAlignment:  CrossAxisAlignment.center,  children: [  new Container(  height: 120,  width: 100,  margin: EdgeInsets.all(2),  child: Center(  child: Image.network(  '${booklistuser![index].imgUrl}'),  ),  ),  new Container(  height: 30,  width: 60,  child: Center(  child: RatingBarIndicator(  rating: booklistuser![index]  .productReviewAverage,  itemBuilder: (context, index) =gt;  Icon(  Icons.star,  color: Colors.amber,  ),  itemCount: 5,  itemSize: 10.0,  direction: Axis.horizontal,  ),  ),  ),  new Container(  width: 80,  height: 30,  child: Center(  child: Text(  ' ${booklistuser![index].title}',  style: TextStyle(  fontSize: 12.0,  fontWeight:  FontWeight.normal,  fontFamily: "Roboto")),  ),  ),  ],  );  },  ),  ),  ),  SizedBox(height: 20),  Text("Novità editoriali",  style: TextStyle(  fontSize: 25.0,  fontWeight: FontWeight.bold,  fontFamily: "Roboto",  color: '#448BB5'.toColor())),  SizedBox(height: 10),  new SingleChildScrollView(  child: Container(  height: 300,  child: new ListView.builder(  shrinkWrap: true,  scrollDirection: Axis.horizontal,  itemCount: booklistdashboard!.length,  itemBuilder:  (BuildContext context, int index) {  return new Column(  mainAxisAlignment:  MainAxisAlignment.center,  crossAxisAlignment:  CrossAxisAlignment.center,  children: [  new Container(  height: 180,  width: 100,  margin: EdgeInsets.all(2),  child: Center(  child: Image.network(  '${booklistdashboard![index].imgUrl}'),  ),  ),  new Container(  height: 30,  width: 60,  child: Center(  child: RatingBarIndicator(  rating:  booklistdashboard![index]  .productReviewAverage,  itemBuilder: (context, index) =gt;  Icon(  Icons.star,  color: Colors.amber,  ),  itemCount: 5,  itemSize: 10.0,  direction: Axis.horizontal,  ),  ),  ),  new Container(  width: 80,  height: 30,  child: Center(  child: Text(  ' ${booklistdashboard![index].title}',  style: TextStyle(  fontSize: 12.0,  fontWeight:  FontWeight.bold,  fontFamily: "Roboto")),  ),  ),  new Container(  width: 80,  height: 30,  child: Center(  child: Text(  ' ${booklistdashboard![index].author}',  style: TextStyle(  fontSize: 12.0,  fontWeight:  FontWeight.normal,  fontFamily: "Roboto")),  ),  ),  ],  );  },  ),  ),  ),  ],  ),  )));  }  });  } }  

Расположение верхней панели

Комментарии:

1. Пожалуйста, предоставьте достаточно кода, чтобы другие могли лучше понять или воспроизвести проблему.