import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; class DetailScreen3 extends StatefulWidget { const DetailScreen3({Key? key,}) : super(key: key); @override State createState() => _DetailScreen3State(); } class _DetailScreen3State extends State { int _currentIndex=0; List _productImage =[ 'assets/handbag/1.webp', 'assets/handbag/2.webp', 'assets/handbag/3.webp', 'assets/handbag/4.webp', 'assets/handbag/5.webp', ]; PageController _pageController=PageController(); @override Widget build(BuildContext context) { Size screenSize=MediaQuery.of(context).size; Color myColor=Colors.cyan.shade800; return Scaffold( extendBody: true, // appBar: AppBar(title: Text('Job Details'),), body: CustomScrollView( slivers: [ SliverAppBar( systemOverlayStyle: const SystemUiOverlayStyle( statusBarColor: Colors.transparent, ), backgroundColor: Colors.white, shadowColor: Colors.white, expandedHeight: screenSize.height*.55, toolbarHeight: 50, centerTitle: false, pinned: true , automaticallyImplyLeading: false , title: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ IconButton(onPressed: (){}, icon: Icon(Icons.arrow_back_ios,color: Colors.black54,)), Padding( padding: EdgeInsets.only(top: screenSize.height*.004), child: Container( padding: EdgeInsets.only(top: 4,bottom: 4), color: Colors.white, child: Container( alignment: Alignment.center, width: screenSize.width*.65, margin: const EdgeInsets.only(left: 4,right: 4,bottom: 3,top: 3), height: 44, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(20), boxShadow: [BoxShadow( color: Colors.grey.withOpacity(.8), blurRadius: 2 )] ), child: TextFormField( textInputAction: TextInputAction.search, onFieldSubmitted: (text){ // Navigator.pushAndRemoveUntil(context, MaterialPageRoute(builder: (context)=>SearchScreen(search: text)), (route) => true); }, decoration: const InputDecoration( contentPadding: EdgeInsets.zero, enabledBorder: OutlineInputBorder( borderSide: BorderSide.none ), focusedBorder: OutlineInputBorder( borderSide: BorderSide.none ), prefixIcon: Icon(Icons.search) ), )), ) ), IconButton(onPressed: (){}, icon: Icon(Icons.shopping_cart,color: Colors.black54,)), ], ), flexibleSpace: Stack( children: [ SafeArea( child: SizedBox( height: screenSize.height*.47, child: FlexibleSpaceBar( background: PageView.builder( controller: _pageController, itemCount: _productImage.length, onPageChanged: (index){ setState(() { _currentIndex=index; }); }, itemBuilder: (context, index){ return Container( margin: EdgeInsets.only(top: screenSize.height*.02), alignment: Alignment.topCenter, width: screenSize.width, child: Image(image: AssetImage('${_productImage[index]}'),) ); }), ), ), ), Container( margin: EdgeInsets.only(top: screenSize.height*.53), child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: _productImage.length, itemBuilder: (context,index){ return GestureDetector( onTap: (){ setState(() { _currentIndex = index; }); _pageController.animateToPage( index, duration: Duration(milliseconds: 300), curve: Curves.easeInOut, ); }, child: Container( margin: const EdgeInsets.symmetric(horizontal: 5), height: 80,width: 80, decoration: BoxDecoration( image: DecorationImage(image: AssetImage('${_productImage[index]}'),), borderRadius: BorderRadius.circular(10), border: Border.all(color:_currentIndex==index? Colors.orange:Colors.grey,width: 3) ), ), ); }), ), ], ), ), SliverToBoxAdapter( child: Container( decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.only(topLeft: Radius.circular(15,),topRight: Radius.circular(15)), boxShadow: [BoxShadow( color: Colors.grey, spreadRadius: 2,blurRadius: 2 )] ), margin: EdgeInsets.only(top: 10,left: 10,right: 10), padding: const EdgeInsets.only(left: 15,right: 15), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ const SizedBox( height: 10, ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ SizedBox( width: screenSize.width*.7, child: const Text( 'High Quality Designer Handbag for Women with Gold Plated Stainless Steel Joint', style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18), ), ), Column( children: [ const Text('\$200',style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18,decoration: TextDecoration.lineThrough),), const Text('\$149',style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18),), ], ) ], ), const SizedBox( height: 10, ), const Text('Product Details',style: TextStyle(fontWeight: FontWeight.bold,fontSize: 22),), const SizedBox( height: 5, ), Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Container( width: screenSize.width*.45, child: const Text( 'Number of Compartment',style: TextStyle(fontSize: 18), ), ), Text(':'), SizedBox(width: 5,), Text('2',style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold),) ], ), const SizedBox( height: 5, ), Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Container( width: screenSize.width*.45, child: const Text( 'Capacity',style: TextStyle(fontSize: 18), ), ), Text(':'), SizedBox(width: 5,), Text('10 L',style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold),) ], ), Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Container( width: screenSize.width*.45, child: const Text( 'Material',style: TextStyle(fontSize: 16), ), ), Text(':'), SizedBox(width: 5,), Text('PU Leather',style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold),) ], ), const SizedBox( height: 5, ), Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Container( width: screenSize.width*.45, child: const Text( 'Width',style: TextStyle(fontSize: 16), ), ), Text(':'), SizedBox(width: 5,), Text('21 cm',style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold),) ], ), Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Container( width: screenSize.width*.45, child: const Text( 'Height',style: TextStyle(fontSize: 16), ), ), Text(':'), SizedBox(width: 5,), Text('17 cm',style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold),) ], ), Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Container( width: screenSize.width*.45, child: const Text( 'Closure',style: TextStyle(fontSize: 16), ), ), Text(':'), SizedBox(width: 5,), Text(' Metal Zipper',style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold),) ], ), const SizedBox( height: 5, ), const SizedBox( height: 5, ), const SizedBox( height: 5, ), const SizedBox( height: 5, ), const Text( 'Product Description:', style: TextStyle(fontWeight: FontWeight.bold,fontSize: 22), ), SizedBox(height: 10,), RichText( text: TextSpan( children: [ TextSpan( text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry..\n', style: TextStyle(fontSize: 16, color: Colors.black), ), TextSpan( text: 'Line 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n', style: TextStyle(fontSize: 16, color: Colors.blue), ), TextSpan( text: 'Line 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n', style: TextStyle(fontSize: 16, color: Colors.red), ), TextSpan( text: 'Line 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n', style: TextStyle(fontSize: 16, color: Colors.black), ), TextSpan( text: 'Line 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n', style: TextStyle(fontSize: 16, color: Colors.blue), ), TextSpan( text: 'Line 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n', style: TextStyle(fontSize: 16, color: Colors.red), ), TextSpan( text: 'Line 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n', style: TextStyle(fontSize: 16, color: Colors.black), ), TextSpan( text: 'Line 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n', style: TextStyle(fontSize: 16, color: Colors.blue), ), TextSpan( text: 'Line 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n', style: TextStyle(fontSize: 16, color: Colors.red), ), TextSpan( text: 'Line 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n', style: TextStyle(fontSize: 16, color: Colors.black), ), TextSpan( text: 'Line 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n', style: TextStyle(fontSize: 16, color: Colors.blue), ), TextSpan( text: 'Line 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n', style: TextStyle(fontSize: 16, color: Colors.red), ), TextSpan( text: 'Line 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n', style: TextStyle(fontSize: 16, color: Colors.black), ), TextSpan( text: 'Line 2\n', style: TextStyle(fontSize: 16, color: Colors.blue), ), TextSpan( text: 'Line 3\n', style: TextStyle(fontSize: 16, color: Colors.red), ), TextSpan( text: 'Line 1\n', style: TextStyle(fontSize: 16, color: Colors.black), ), TextSpan( text: 'Line 2\n', style: TextStyle(fontSize: 16, color: Colors.blue), ), TextSpan( text: 'Line 3\n', style: TextStyle(fontSize: 16, color: Colors.red), ), ], ), ), const SizedBox( height: 70, ), ], ), ), ) ], ), bottomNavigationBar: Container( margin: EdgeInsets.only(top: 5), height: screenSize.height*.08, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.only(topLeft: Radius.circular(15),topRight: Radius.circular(15)), boxShadow: [BoxShadow(color: Colors.grey,spreadRadius: 2,blurRadius: 3)] ), child: Row( children: [ GestureDetector( onTap: (){}, child: Container( alignment: Alignment.center, width: screenSize.width*.5, decoration: BoxDecoration( border: Border(right: BorderSide(width: 1,color: Colors.grey)) ), child: Text('Add to Cart',style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),)), ), GestureDetector( onTap: (){}, child: Container( alignment: Alignment.center, width: screenSize.width*.5, child: Text('Buy Now',style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),)), ), ], ), ) // floatingActionButton: FloatingActionButton.extended( // backgroundColor: myColor, // onPressed: () { // }, // label: const Text('Add to Cart'), // icon: const Icon(Icons.add_shopping_cart), // ) ); } }