Develop Reference

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

Unexpected Line between Containers Flutter

Many Times in flutter I Found a Line between two Containers in flutter.
Code example
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({
Key? key,
required this.title,
}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
color: Colors.red,
width: double.infinity,
child: Column(
children: [
Container(
height: 150,
child: const Center(
child: Text('cdccd'),
),
),
Container(
height: 20,
color: Colors.red,
),
buildSeperator()
],
),
),
Container(
height: 300,
width: double.infinity,
child: Text('cdcdcd'),
),
],
),
),
);
}
///Build Seperator
Widget buildSeperator() {
return Stack(
children: [
Container(
height: 24,
color: Colors.red,
),
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
),
color: Colors.white,
),
height: 24,
width: double.infinity,
),
],
);
}
}
Reference Image:
If It's a Flutter Issue: Flutter Team Request you to Resolve it.

Work Around but not final Solution,
Add Another Container Above the Container with a border with a higher height.
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 0,
backgroundColor: Color(0xFF842247),
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
color: const Color(0xFF842247),
height: 56,
),
Container(
color: const Color(0xFF842247),
width: double.infinity,
child: Column(
children: [
Container(
height: 24,
child: const Center(
child: Text('cdccd'),
),
),
buildSeperator()
],
),
),
Container(
height: 300,
// width: double.infinity,
child: Text('cdcdcd'),
),
],
),
),
);
}
///Build Seperator
Widget buildSeperator() {
return Stack(
clipBehavior: Clip.none,
children: [
Container(
height: 24,
color: const Color(0xFF842247),
),
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
),
color: Colors.white,
),
height: 24,
width: double.infinity,
),
],
);
}
}

How to shift image top bottom in flutter

I was trying to make this page but this design in last is not shifting to the last bottom, I've tried padding but this doesn't look good and also I've tried positioned widget but it is showing some error please someone tell how I can shift that design to bottom last
this is my git repo: https://github.com/cryptic-exe/Otp_verfication
this is my code:
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String dropdownValue = 'English';
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: Column(
children: [
Icon(
Icons.photo_outlined,
size: 100.0,
),
Padding(
padding: const EdgeInsets.only(top: 40.0),
child: Text(
'Please Select Your Language',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20.0),
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Text(
'You can change the language \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t at any time',
style: TextStyle(
fontWeight: FontWeight.w300, fontSize: 15.0),
),
),
Padding(
padding: const EdgeInsets.only(top: 9.0),
child: Container(
width: 200,
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
decoration: BoxDecoration(
border: Border.all(),
),
child: DropdownButton<String>(
value: dropdownValue,
icon: const Icon(Icons.arrow_drop_down_outlined),
isExpanded: true,
iconSize: 30,
elevation: 16,
style: const TextStyle(color: Colors.black),
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>[
'English',
'Hindi',
'French',
'Spanish',
'Russian',
'Arabic'
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: TextStyle(
fontSize: 20,
letterSpacing: 0.9,
fontWeight: FontWeight.w300),
),
);
}).toList(),
),
),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
width: 200,
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
decoration: BoxDecoration(
color: Colors.deepPurple,
border: Border.all(),
),
child: TextButton(
onPressed: () {},
child: Text(
'NEXT',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.w400,
letterSpacing: 0.9),
),
),
),
),
],
),
),
Stack(
children: [
Positioned.fill(
child: Container(
width: 393,
child: Image(
image: AssetImage('Images/design2.png'),
fit: BoxFit.fill,
),
),
),
Positioned(
child: Container(
width: 393,
child: Image(
image: AssetImage('Images/design1.png'),
colorBlendMode: BlendMode.overlay,
fit: BoxFit.fill,
),
),
),
],
),
],
),
);
}
}

you can use bottomSheet to place your image.
Add the below code inside your Scaffold
bottomSheet: Container(
width: double.infinity,
child: Image(
image: AssetImage('Images/design1.png'),
colorBlendMode: BlendMode.overlay,
fit: BoxFit.fill,
),
),

You can also use a spacer to push the content down
https://api.flutter.dev/flutter/widgets/Spacer-class.html
On mobile so I cannot give snippet

type 'Future<dynamic>' is not a subtype of type 'Route<Object>'

I got the the following error for below code. I was attempting to navigate to the next page. I was able to navigate just once and then I got the error mentioned above. Please do help me on this. I tried even using await but await is not supported for builder: (BuildContext context) => SubmitArticles()).
class UserSubmitOption extends StatefulWidget {
#override
_UserSubmitOptionState createState() => _UserSubmitOptionState();
}
class _UserSubmitOptionState extends State<UserSubmitOption> {
#override
Widget build(BuildContext dynamic) => MaterialApp(
debugShowCheckedModeBanner: false,
home:SafeArea (
child: Scaffold(
backgroundColor: Colors.indigo[800],
resizeToAvoidBottomInset: false,
appBar: AppBar(
toolbarHeight: 60,
backgroundColor: Colors.indigo[900],
automaticallyImplyLeading: false,
title: Text("What do you want to submit?",style:TextStyle(color:Colors.white,fontWeight:FontWeight.bold)),
centerTitle: true,
leading: IconButton(
icon: Icon(Icons.arrow_back,color:Colors.black,size:25,),
onPressed: () => Navigator.push(context,
MaterialPageRoute(builder: (context) => UserMenu())))),
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(60.0),
child: Center(
child: Wrap(spacing: 50, runSpacing: 50.0, children: <Widget>[
GestureDetector(
onTap: () {
SubmitQuiz();
setState(() {
});
},
child: SizedBox(
width: 200.0,
height: 200.0,
child: Card(
color: Colors.indigo,
borderOnForeground:true,
shadowColor: Colors.white,
elevation: 20.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0)),
child: Center(
child: Padding(
padding: const EdgeInsets.all(50.0),
child: Column(
children: <Widget>[
Icon(
Icons.vpn_key_outlined,size:60,color:Colors.black,
), // Image.asset("assets/todo.png",width: 64.0,),
SizedBox(
height: 7.0,
),
Text(
"Quiz",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 17.0,
),
),
SizedBox(
height: 5.0,
),
],
),
)),
),
)),
GestureDetector(
onTap: () async {Navigator.push(context,
MaterialPageRoute (
builder: (BuildContext context) => SubmitArticles())
);},
child: SizedBox(
width: 200.0,
height: 200.0,
child: Card(
color: Colors.indigo,
elevation: 20.0,
shadowColor:Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0)),
child: Center(
child: Padding(
padding: const EdgeInsets.all(45.0),
child: Column(
children: <Widget>[
Icon (
Icons.article_outlined,size:60,
),
// Image.asset("assets/note.png",width: 64.0,),
SizedBox(
height: 7.0,
),
Text(
"Articles",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 17.0),
),
SizedBox(
height: 5.0,
),
],
),
)),
),
)),
]),
),
),
],
),
),
)));
}

You are trying to access route in the wrong way
use instead:
Navigator.push(context,MaterialPageRoute(
builder : (context) => SubmitArticles())
);
i hope it work with you.
happy coding!

Flutter positioning hyperlink on appbar

Is possible to position an hyperlink created with url_launcher on the appbar? Here a screen of what i mean https://ibb.co/X28TzNN "Sito Web" is the hyperlink i want to change position, need move it in the red cirle. Here my AppBar
class BackgroundImage extends StatelessWidget{
final Widget body;
BackgroundImage({this.body});
#override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
elevation: 0,
title: Text('Blumax', style: TextStyle(
fontWeight: FontWeight.w500,
fontFamily: 'DancingScript',
fontSize: 40
),),
centerTitle: false,
),
body: Stack(
children: <Widget>[Container(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage("assets/whiteimage.jpg"), fit: BoxFit.cover),
),
),
body
]
)
);
}
}
And that's is what i did for position the text in the top right
Widget build(BuildContext context) {
return InkWell(
child: Container(
alignment: Alignment(0.9, -1.0),
child: Text(
_text,
textAlign: TextAlign.right,
style: TextStyle(
fontFamily: 'RobotoMono',
fontSize: 20,
color: Colors.white,
decoration: TextDecoration.underline),
)),
onTap: _launchURL,
);
}
}

#andrea, you don't need to use InkWell/Container. You can use actions in appBar with simple button and try something like this,
class MyAppState extends State<MyApp> {
String _text = 'Link';
String _url = 'https://www.test.com';
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Test'),
actions: <Widget>[
FlatButton(
child: Text(_text, style: TextStyle(fontSize: 18.0, color: Colors.white)),
onPressed: _launchURL,
),
IconButton(icon: Icon(Icons.more_vert, color: Colors.white), onPressed: (){})
]
),
body: Padding(
padding: EdgeInsets.all(20.0),
child: Center(
child: Text('')
)
)
)
);
}
_launchURL() async {
if (await canLaunch(_url)) {
await launch(_url);
} else {
throw 'Could not launch $_url';
}
}
}

try actions in AppBar, You can have FlatButton or Inkwell or any Widget that gives you a touch event inside.
appBar: AppBar(
title: Text(Lang.treeView),
actions: <Widget>[
InkWell(
child: Container(
alignment: Alignment(0.9, -1.0),
child: Text(
"ABC",
textAlign: TextAlign.right,
style: TextStyle(
fontFamily: 'RobotoMono',
fontSize: 20,
color: Colors.white,
decoration: TextDecoration.underline),
))),
],
)