Develop Reference

Flutter listview.separated inside SingldeChildScrollVİew

I am developing an app with flutter and I am getting an error about height.
I have a listview.separated and I have a SingleChildScrollView. I am getting flex error.
This is my file to align widgets inside Scaffold and SafeArea. I have a file for runApp but it is not important for the question.
class ProfilePageC extends StatelessWidget {
const ProfilePageC({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Column(
children: [
AboutTopBarW(), // It has not listview
ImageFieldW(), // It has no listview
PercentsW(), //It has no listview
HomeArticleList2W() //It has a listview.separated
],
),
),
),
);
}
}
this is my file for listview.separated widget.
class HomeArticleList2W extends ConsumerWidget {
const HomeArticleList2W({Key? key}) : super(key: key);
#override
Widget build(BuildContext context, WidgetRef ref) {
final futureCatFacts = ref.watch(multiFutureArticleProvider);
return Expanded(
child: futureCatFacts.when(
loading: () => const ShimmerHomeW(),
error: (err, stack) => Text('Error: $err'),
data: (data) {
final decodedData = json.decode(data.body);
return ListView.separated(
separatorBuilder: (BuildContext context, int index) {
if (index % 3 == 0) {
return const Divider();
}
return const Divider();
},
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: decodedData.length ,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.only(
left: 20,
right: 20,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network(
decodedData[index]['largeImage'].toString(),
fit: BoxFit.cover,
height: 70,
width: 70,
)),
const SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
decodedData[index]['title'],
style: const TextStyle(
fontSize: 15, fontWeight: FontWeight.bold),
),
const SizedBox(
height: 5,
),
Row(
children: [
const Icon(
Icons.av_timer_sharp,
size: 20,
),
Text(decodedData[index]['date']),
],
),
],
),
),
const SizedBox(
width: 5,
),
const Icon(Icons.bookmark_border),
],
),
);
},
);
},
),
);
}
}
There is no error when I erase HomeArticleList2W() from the SingleChildScrollView. Therefore I thnink the error consist of the listview.separated.
How to solve this problem.

Remove the expanded widget and add mainAxisSize min
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
decodedData[index]['title'],
style: const TextStyle(
fontSize: 15, fontWeight: FontWeight.bold),
),
const SizedBox(
height: 5,
),
Row(
children: [
const Icon(
Icons.av_timer_sharp,
size: 20,
),
Text(decodedData[index]['date']),
],
),
],
),

Why does this code display a blank screen when running?

Before displaying the code, here are the things that I checked to avoid similar answers :
android:extratNativeLibs="true"
Jsonfile firebase connected
routegenerator and initialroute checked in the main file and
generatorfile
.I like to avoid mediaQuery and work with percentages, that is why I use FractionallySizedBox. Here is the code of the initial route :
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Start extends StatelessWidget {
const Start({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Align(
alignment: Alignment.center,
child: Center(
child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
FractionallySizedBox(widthFactor: 0.15, heightFactor: 0.15, child: Image.asset('assets/crown.png')),
FractionallySizedBox(
widthFactor: 0.40,
heightFactor: 0.20,
child: TextButton(
onPressed: () {
Navigator.of(context).pushNamed('/items');
},
child: Container(
decoration: BoxDecoration(color: Colors.purple),
child: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
const Text('Start shopping',
style: TextStyle(
color: Colors.white,
fontStyle: FontStyle.italic,
fontSize: 25,
)),
Image.asset('assets/crown.png')
]))))
])))));
}
}

Warp your FractionallySizedBox with Expanded
Expanded(
child: FractionallySizedBox(
widthFactor: 0.15,
heightFactor: 0.15,
child: Image.asset('assets/crown.png')),
),
Expanded(
child: FractionallySizedBox(
widthFactor: 0.40,
heightFactor: 0.20,
child: TextButton(
onPressed: () {
Navigator.of(context).pushNamed('/items');
},
child: Container(
decoration: BoxDecoration(color: Colors.purple),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text('Start shopping',
style: TextStyle(
color: Colors.white,
fontStyle: FontStyle.italic,
fontSize: 25,
)),
Image.asset('assets/crown.png')
],
),
),
),
),
),

How to remove extra space below a TabBarView inside the body SliverToBoxAdapter in NestedScrollView?

The space between tab bar view and bottom navigation bar is the extra space that I want to remove.
in the image, you can see the space that shouldn't be there
class Tab_Bar2 extends StatefulWidget {
const Tab_Bar2({Key? key}) : super(key: key);
#override
_Tab_Bar2State createState() => _Tab_Bar2State();
}
class _Tab_Bar2State extends State<Tab_Bar2> with SingleTickerProviderStateMixin {
final bodyGlobalKey = GlobalKey();
final List<Widget> myTabs = [
Text(..),
Text(..),
Text(..),
Text(..),
Text(..),
Text(..),
];
late TabController _tabController;
late ScrollController _scrollController;
#override
void initState() {
_scrollController = ScrollController();
_tabController = TabController(length: 6, vsync: this);
super.initState();
}
#override
void dispose() {
_tabController.dispose();
_scrollController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Dashboard"),
centerTitle: true,
backgroundColor: const Color(0xffFFC36A),
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.notifications),
),
]),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Color(0xffFFC36A),
),
child: Padding(
padding: EdgeInsets.only(top: 20.0, left: 60),
child: Text(
'Drawer',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20),
),
),
),
ListTile(
title: const Text('Log Out'),
onTap: () {
},
),
ListTile(
title: const Text('Item 2'),
onTap: () {
Navigator.pop(context);
},
),
],
),
),
body: NestedScrollView(
controller: _scrollController,
headerSliverBuilder: (BuildContext context, value) {
return [
SliverToBoxAdapter(child: Column(
children: [img1(), grid(), rsp(), LiveChart()],
),),
SliverToBoxAdapter(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.symmetric(horizontal: 15,vertical: 15),
child: Text('Latest',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
fontFamily: 'railway',
color: Theme_Data.font_color,
),
),
),
Container(
margin: EdgeInsets.symmetric(horizontal: 3.5),
padding: EdgeInsets.symmetric(horizontal: 2.5,vertical: 2.5),
height: 35,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.shade200),
borderRadius: BorderRadius.all(
Radius.circular(25),
),
),
child: TabBar(
controller: _tabController,
labelPadding: EdgeInsets.symmetric(horizontal: 2.0, vertical: 5),
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(50), // Creates border
color: Theme_Data.th_light_color),
tabs: myTabs,
),
),
],
),
),
];
},
body: Container(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Theme(
data: Theme.of(context).copyWith(
dividerColor: Colors.white
),
child: TabBarView(
controller: _tabController,
children: <Widget>[
SalesTable(),
QuotationsTable(),
PurchasesTable(),
TransfersTable(),
ConsumersTable(),
SuppliersTable(),
],
),
),
),
),
);
}
}
in above code i think there might be the issues between the usage of SviverToBoxAdapter what widget should i use instead to achieve the required design

Open page two inside the body of page one using Cupertino Segmented Control

I am using Cupertino Segmente Control , I created a tab using three swings and assigned three widgets to the front page body. When selecting any of the tabs, it displays the body of the new widget. So far, everything works fine. Products are loaded inside each page, and when we select a product, it must go to the second page .The second page opens, but inside the body of the first page. If you help me, thank you very much
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int groohEntkhabi = 1;
final Map<int, Widget> logoBala = const <int, Widget>{
0: Text("کشاورزی" ,style: TextStyle(fontSize: 14),),
1: Text("خرید فروش" ,style: TextStyle(fontSize: 14),),
2: Text("رهن و اجاره" ,style: TextStyle(fontSize: 14),),
};
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
iconTheme: IconThemeData(color: Colors.blue),
//centerTitle: true,
title: Container(
child: Row(
children: [
Expanded(
child: CupertinoSegmentedControl(
padding: EdgeInsets.all(0.0),
groupValue: groohEntkhabi,
onValueChanged: (changeFromGroupValue) {
setState(() {
groohEntkhabi = changeFromGroupValue;
});
},
children: logoBala,
),
),
],
)
),
actions: [
IconButton(icon: Icon(Icons.search), onPressed: (){}),
],
),
drawer: MyDraver(),
bottomNavigationBar: MyBottomNavigation(),
floatingActionButton: FloatingActionButton.extended(
onPressed: () {}, label: Text("ثبت رایگان آگهی",style: TextStyle(color: Colors.white),), icon:Icon(Icons.add,color: Colors.white,),backgroundColor: Colors.blue,
),
// floatingActionButton: FloatingActionButton(onPressed: (){
// // Navigator.of(context).push(MaterialPageRoute(
// // builder: (context) => Shoab()
// // ));
// },
// shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
// backgroundColor: Colors.deepOrange,
// child:Center(child: Text("ثبت رایگان آگهی")),),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
body:
(
_childern(groohEntkhabi)
),
),
);
}
Widget _childern(index){
List<Widget> page_screen=[];
page_screen.add(_keshavarzi());
page_screen.add(kharidFroosh());
page_screen.add(_ejare());
return page_screen[index];
}
Widget kharidFroosh(){
return MaterialApp(
debugShowCheckedModeBanner: false,
localizationsDelegates: [
// ... app-specific localization delegate[s] here
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: [
const Locale('en', ''), // farsi
],
home: ListView.builder(padding: EdgeInsets.only(top: 3.0,left: 3.0,right: 3.0),
itemBuilder: mycard_view1,itemCount: 5,));
}
Widget mycard_view1(BuildContext context ,int index){
String mogheiatt ="کوی ملا نفس";
String mogheiat = mogheiatt.length>14 ? mogheiatt.substring(0,14):mogheiatt;
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),),
elevation: 1.0,
//color: Colors.blue,
child: InkWell(
onTap: (){
Navigator.of(context).push(MaterialPageRoute(
builder: (BuildContext context) => Safhe2_kharid_froosh()));
},
child: Stack(
children: <Widget> [
Container(margin: EdgeInsets.fromLTRB(50.0, 5.0, 5.0, 5.5),
height: 160.0,
width: double.infinity,
decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20.0)),
child: Padding(
padding: EdgeInsets.fromLTRB(100.0,10.0,10.0,2.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text("فروش ویلایی",style: TextStyle(fontFamily: "shabnammedium",fontSize: 15.0),),
SizedBox(
height: 7.0,
),
Text("قیمت : 850 م تومان",style: TextStyle(fontFamily: "shabnammedium",fontSize: 15.0),),
SizedBox(
height: 7.0,
),
Text("متراژ : 85 متر ",style: TextStyle(fontFamily: "shabnammedium",fontSize: 15.0),),
SizedBox(
height: 30.0,
),
Row(
//crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
decoration: BoxDecoration(color: Color(0xffe1f5fe),borderRadius: BorderRadius.circular(10.0),),
child: Center(child: Padding(
padding: EdgeInsets.only(left: 3.0,right: 3.0),
child: Row(
children: [
Text("روز پیش",style: TextStyle(fontFamily: "shabnamlight",color: Colors.black87),),
Text("5",style: TextStyle(fontFamily: "shabnamlight",color: Colors.black87),),
],
),
)),
// width: 70.0,
),
Container(
child: Row(
children: [
Text("...",style: TextStyle(fontFamily: "shabnamlight",color: Colors.black87),),
Text(mogheiat,style: TextStyle(fontFamily: "shabnamlight",color: Colors.black87),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
//width: 100.0,
),
],
),
],
),
),
),
Positioned(
left: 10.0,
top: 5.0,
bottom: 5.0,
child: ClipRRect(borderRadius: BorderRadius.circular(15.0),
child:Image.asset("images/home.jpg",width: 130,fit: BoxFit.cover,),
),
),
],
),
),
);
}
Widget _keshavarzi(){
return Keshavarzi();
}
Widget _ejare(){
return Ejare();
}
}
this is my images app
this is my secend page inside a first page body
and this my first pages

What's the correct way to add splash screen in flutter app?

I am developing a flutter based app and studied there are couple of ways to add splash screen. But I am not sure which one is the best to achieve.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:mingup/screen/login_screen.dart';
// This is the Splash Screen
class SplashScreen extends StatefulWidget {
#override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin{
AnimationController _animationController;
Animation<double> _animation;
#override
void initState() {
// TODO: implement initState
super.initState();
_animationController = new AnimationController(
vsync: this,
duration: new Duration(milliseconds: 500)
);
_animation = new CurvedAnimation(
parent: _animationController,
curve: Curves.easeOut,
);
_animation.addListener(()=> this.setState((){}));
_animationController.forward();
Timer(Duration(seconds: 10), (){
Navigator.push(context, MaterialPageRoute(builder: (context) => LoginScreen()));
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
child: Image.asset(
'images/splashscreenbg.png',
fit: BoxFit.cover,
)
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlutterLogo(
size: _animation.value * 100.0,
),
Padding(padding: EdgeInsets.only(top: 10.0)),
Text("MingUp", style: TextStyle(color: Colors.white, fontSize: 24.0, fontWeight: FontWeight.bold),)
],
),
),
),
]
)
],
),
);
}
}

You can add just a simple splash screen which can navigate to the next screen after 5 seconds.
import 'package:flutter/material.dart';
import 'dart:async';
class SplashScreen extends StatefulWidget {
#override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
#override
void initState() {
super.initState();
Timer(
Duration(seconds: 5),
() => Navigator.pushReplacement(
context, MaterialPageRoute(builder: (context) => Home())));
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Color.fromRGBO(20, 172, 168, 1),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.white,
radius: 60.0,
child: new Image.asset(
'assets/images/tree.jpg',
width: 70,
height: 90,
)),
Padding(
padding: EdgeInsets.only(top: 10.0),
),
Text(
'Your Text here!!',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24.0),
)
],
),
),
),
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(),
Padding(
padding: EdgeInsets.only(top: 20.0),
),
Text(
'Your Text here!!',
softWrap: true,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.white),
)
],
),
)
],
)
],
),
);
}
}