Я создал этот пользовательский интерфейс, используя флаттер, но я не думаю, что это лучший способ, и я хочу спросить об анимации синего контейнера вверху и отображении двух значков, ведущих и перемещающихся как навигационная панель при прокрутке
![enter image description here](https://i.stack.imgur.com/uOVwF.png)
и это мой код:
width = MediaQuery.of(context).size.width;
height = MediaQuery.of(context).size.height;
fSectionHeight = 0.35*height;
return CupertinoPageScaffold(
backgroundColor: CupertinoColors.white,
child: SingleChildScrollView(
child: SafeArea(
top: false,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 50,bottom: 20,left: 20,right: 20),
margin: EdgeInsets.only(bottom: 20),
color: Color(0xFF2FBFFF),
height: fSectionHeight,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
GestureDetector(
onTap: (){ },
child: Icon(CupertinoIcons.back,color: CupertinoColors.white,size: 28),
),
GestureDetector(
onTap: (){ print("camera cliked"); },
child: Container(
child: Align(
alignment: Alignment.centerRight,
child: Icon(CupertinoIcons.photo_camera_solid,color: CupertinoColors.white,size: 44),
),
width: width,
)
),
],
)
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 20,right:20),
child: Column(
children: <Widget>[
Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text("Titre de l'article",style: Styles.formFieldTitle)
),......................
],
),
],
),
),
],
)
],
),
)
)
);