我想用两个不同的 Ui 和一个数据创建一个模态底部表。但我不知道如何在底页上设置位置。我想要这样的东西，但在模态底部表中：
我想为此使用英雄动画。但我不知道如何创建它。任何人都可以帮助我吗？
源代码或链接寻求帮助......这是迷你卡：
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import 'package:podkadeh/services/HexColors/Colors.dart';
class PlayerMiniCard extends StatefulWidget {
final int? epdId;
const PlayerMiniCard({Key? key,required this.epdId}) : super(key: key);
@override
_PlayerMiniCardState createState() => _PlayerMiniCardState();
}
class _PlayerMiniCardState extends State<PlayerMiniCard> {
final String getEpisodes = """
query Episode(\$id: Int!) {
episode(Ep_ID: \$id){
Title
image
Description
audio
}
}
""";
@override
Widget build(BuildContext context) {
return Container(
child: Query(
options: QueryOptions(
document: gql(getEpisodes),
variables: {'id': widget.epdId},
pollInterval: Duration(seconds: 10),
),
builder: (
QueryResult result, {
Refetch? refetch,
FetchMore? fetchMore,
}) {
return miniCard(result.data!['episode']);
},
),
);
}
Widget miniCard(data){
final String play = 'assets/icons/play.svg';
var pageWidth = MediaQuery.of(context).size.width;
return Padding(
padding: EdgeInsets.only(
top: pageWidth * 0.03,
left: pageWidth * 0.08,
right: pageWidth * 0.08),
child: SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
// physics:
// BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top: pageWidth * 0.0),
child: Container(
width: pageWidth * 0.128,
height: pageWidth * 0.128,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: CachedNetworkImageProvider(
data!['image'].toString(),
)),
borderRadius: BorderRadius.all(Radius.circular(15)),
border: Border.all(
color: MyColors.lightGrey,
width: 1,
)),
),
),
Container(
width: pageWidth * 0.45,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(
right: pageWidth * 0.025, top: pageWidth * 0.02),
child: Text(
data!['Title'].toString(),
textAlign: TextAlign.right,
overflow: TextOverflow.fade,
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: EdgeInsets.only(
right: pageWidth * 0.025,
top: pageWidth * 0.01,
left: pageWidth * 0.0),
child:Text(" "),
// Html(
// data: data!['Description'],
// )
),
],
),
),
Spacer(),
Padding(
padding: EdgeInsets.only(top: pageWidth * .04),
child: IconButton(
// padding: EdgeInsets.zero,
constraints: BoxConstraints(),
onPressed: () {},
icon: SvgPicture.asset(
play,
width: pageWidth * 0.9,
height: pageWidth * 0.9,
color: MyColors.black),
),
),
],
),
));
}
}
这是我要转换的大牌：
import 'package:audioplayers/audioplayers.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_svg/svg.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import 'package:podkadeh/pages/audio_file/audio_file.dart';
import 'package:podkadeh/provider/content.dart';
import 'package:podkadeh/services/HexColors/Colors.dart';
import 'package:provider/provider.dart';
final String getEpisodes = """
query Episode(\$id: Int!) {
episode(Ep_ID: \$id){
Title
image
Description
audio
}
}
""";
class PlayerMain extends StatefulWidget {
final int? epdId;
const PlayerMain({Key? key, required this.epdId}) : super(key: key);
@override
_PlayerMainState createState() => _PlayerMainState();
}
class _PlayerMainState extends State<PlayerMain> {
late AudioPlayer advancedPlayer;
@override
void initState(){
super.initState();
advancedPlayer = AudioPlayer();
}
@override
Widget build(BuildContext context) {
return Container(
child: Query(
options: QueryOptions(
document: gql(getEpisodes),
variables: {'id': widget.epdId},
pollInterval: Duration(seconds: 10),
),
builder: (
QueryResult result, {
Refetch? refetch,
FetchMore? fetchMore,
}) {
return playerMain(result.data!['episode']);
},
),
);
}
Widget playerMain(data) {
final providerData = Provider.of<Content>(context);
var pageWidth = MediaQuery.of(context).size.width;
return DefaultTabController(
length: 3,
initialIndex: 0,
child: Scaffold(
body: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverToBoxAdapter(
child: Padding(
padding: EdgeInsets.only(
top: pageWidth * 0.08,
left: pageWidth * 0.08,
right: pageWidth * 0.08),
// child: SingleChildScrollView(
// physics: BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top: pageWidth * .0),
child: IconButton(
// padding: EdgeInsets.zero,
constraints: BoxConstraints(),
onPressed: () {
Navigator.of(context).pop();
},
icon: SvgPicture.asset(arrow,
width: pageWidth * 0.9,
height: pageWidth * 0.9,
color: MyColors.black),
),
),
Spacer(),
Padding(
padding: EdgeInsets.only(top: pageWidth * .0),
child: IconButton(
// padding: EdgeInsets.zero,
constraints: BoxConstraints(),
onPressed: () {},
icon: SvgPicture.asset(addSquare,
width: pageWidth * 0.9,
height: pageWidth * 0.9,
color: MyColors.black),
),
),
Padding(
padding: EdgeInsets.only(top: pageWidth * .0),
child: IconButton(
// padding: EdgeInsets.zero,
constraints: BoxConstraints(),
onPressed: () {},
icon: SvgPicture.asset(frame,
width: pageWidth * 0.9,
height: pageWidth * 0.9,
color: MyColors.black),
),
),
Padding(
padding: EdgeInsets.only(top: pageWidth * .0),
child: IconButton(
// padding: EdgeInsets.zero,
constraints: BoxConstraints(),
onPressed: () {},
icon: SvgPicture.asset(send,
width: pageWidth * 0.9,
height: pageWidth * 0.9,
color: MyColors.black),
),
),
],
),
Container(
height: pageWidth * 0.88,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Padding(
padding: EdgeInsets.only(
top: pageWidth * 0.04,
left: pageWidth * 0.08,
right: pageWidth * 0.08),
child: Container(
width: pageWidth * 0.7,
height: pageWidth * 0.6,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: CachedNetworkImageProvider(
data!['image'].toString(),
)),
borderRadius:
BorderRadius.all(Radius.circular(15)),
border: Border.all(
color: MyColors.lightGrey,
width: 1,
)),
),
),
],
),
),
Padding(
padding: EdgeInsets.only(
top: pageWidth * 0.05, bottom: pageWidth * 0.04),
child: Column(
children: [
Center(
child: Text(
data!['Title'].toString(),
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 18.0),
)),
],
),
),
AudioFile(advancedPlayer :advancedPlayer ,path: data!['audio'].toString(),),
],
),
)),
SliverAppBar(
expandedHeight: pageWidth * 0.17,
backgroundColor: MyColors.white,
elevation: 0,
pinned: true,
stretch: true,
snap: true,
floating: true,
bottom: PreferredSize(
preferredSize: Size.fromHeight(50.0),
child: Container(
decoration: BoxDecoration(
// color:Colors.grey,
border: Border(
bottom:
BorderSide(color: Colors.grey, width: 0.3))),
child: TabBar(
indicatorColor: Colors.transparent,
labelColor: Colors.red,
unselectedLabelColor: Colors.black,
tabs: <Widget>[
Tab(
text: "درباره اپیزود",
),
Tab(
text: "كامنت ها",
),
Tab(
text: "صف پخش",
),
],
),
),
),
),
];
},
body: TabBarView(
children: <Widget>[
Center(
child: Html(
data: data!['Description'],
),),
Center(
child: Text("كامنت"),
),
Center(
child: Text("صف پخش"),
),
],
),
),
));
}
}
这是UI，我为每个人使用了类