i want to swipe taps with its corresponding tabview's contents. In below code single tap covered full screen width if i swiped to next tap than contain of tabview need to be changed but i only get content changed when clicking on tap or swiping tabview's contents. I will really appreciate if i get help to solve this issue.
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyHomePage(),
),
),
);
}}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
final _kTabPages = <Widget>[
Center(child: Icon(Icons.cloud, size: 64.0, color: Colors.teal)),
Center(child: Icon(Icons.alarm, size: 64.0, color: Colors.cyan)),
Center(child: Icon(Icons.forum, size: 64.0, color: Colors.blue)),
Center(child: Icon(Icons.forum, size: 64.0, color: Colors.blue)),
Center(child: Icon(Icons.forum, size: 64.0, color: Colors.blue)),
Center(child: Icon(Icons.forum, size: 64.0, color: Colors.blue)),
Center(child: Icon(Icons.forum, size: 64.0, color: Colors.blue)),
Center(child: Icon(Icons.forum, size: 64.0, color: Colors.blue)),
];
final _kTabs = <Tab>[
Tab(text: 'Lead-In'),
Tab(text:'Contacted'),
Tab(text:'Demo'),
Tab(text:'Presented'),
Tab(text:'Proposal'),
Tab(text:'Discussed'),
Tab(text:'Closure'),
Tab(text:'Follow Up'),
];
return DefaultTabController(
length: _kTabs.length,
child: Scaffold(
appBar: AppBar(
title: Text('demo tap'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.account_circle),
onPressed: () {},
),
],
),
body: DefaultTabController(
length: 8,
initialIndex: 0,
child: Column(
children: <Widget>[
Container(
height: 60.0,
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: TabBar(
isScrollable: true,
labelColor: Colors.teal,
indicatorColor: Colors.teal,
indicatorWeight: 2.0,
labelPadding: EdgeInsets.only(right: 250.0, left: 40.0),
indicatorPadding: EdgeInsets.only(left: 40.0),
labelStyle: TextStyle(fontSize: 16.0),
tabs: _kTabs,
)),
Container(
height: MediaQuery.of(context).size.height,
child: TabBarView(
children: _kTabPages,
))
],
),
)
),
);
}}
Related
I use the CurvedNavigationBar V1.0.3 to navigate between 5 sides. each of them has an extra dart file. The bottombar is in my main.dart.
I want to use a button in /body which leads to another side and change also to the right icon in bottombar.
main.dart
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'Pages/Beritpage.dart';
import 'Pages/donepage.dart';
import 'Pages/settingspage.dart';
import 'Pages/tinapage.dart';
import 'Pages/assmapage.dart';
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
await SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
static final String title = 'Curved Navigation Bar';
const MyApp({super.key});
#override
Widget build(BuildContext context) => MaterialApp(
debugShowCheckedModeBanner: false,
home: MainPage(),
);
}
class MainPage extends StatefulWidget {
#override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
final navigationKey = GlobalKey<CurvedNavigationBarState>();
int index = 2;
final screens = [
AssmaPage(),
BeritPage(),
TinaPage(),
SettingsPage(),
DonePage(),
];
#override
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
final items = <Widget>[
Icon(Icons.mediation, size: 30),
Icon(Icons.donut_small, size: 30),
Icon(Icons.home, size: 30),
Icon(Icons.settings, size: 30),
Icon(Icons.done, size: 30),
];
// SafeArea and Cliptrect für IOS
return Container(
color: Color(0xFF145246),
child: SafeArea(
top: false,
child: ClipRect(
child: Scaffold(
extendBody: true,
// Topbar Start
appBar: AppBar(
toolbarHeight: 80,
// Set this height
leading: Icon(Icons.account_circle_rounded),
centerTitle: true,
title: SizedBox(
width: 70,
child: Image.network('https://i.ibb.co/c8ZvGYC/New.png'),
),
//actions: <Widget>[
//Padding(
//padding: EdgeInsets.only(right: 20.0),
//child: GestureDetector(
//onTap: () {},
//child: Icon(
//Icons.,
//size: 26.0,
//),
//)),
//],"
flexibleSpace: Container(
color: Color(0xFF145246),
//child: Column(
//children: [
//Text('One'),
//Text('Two'),
//],
//),
),
),
//Drawer Start
endDrawer: Container(
height: screenHeight,
width: screenWidth * 0.7,
color: Color(0xFF145246)),
//Drawer Ende
//Topbar Ende
body: screens[index],
//Bottombar Start
bottomNavigationBar: Theme(
data: Theme.of(context).copyWith(
iconTheme: IconThemeData(color: Colors.white),
),
child: CurvedNavigationBar(
key: navigationKey,
color: Color(0xFF145246),
buttonBackgroundColor: Color(0xFF145246),
backgroundColor: Colors.transparent,
height: 60,
animationCurve: Curves.easeInOut,
animationDuration: Duration(milliseconds: 300),
index: index,
items: items,
onTap: (index) => setState(() => this.index = index),
),
//Bottombar Ende
),
),
),
),
);
}
}
The recommended way is
final navigationState = navigationKey.currentState!;
navigationState.setPage(0);
but that only seems working, when i have the screens in the same dart file.
i tried to put the code in one of my page files but then i get a
"_CastError (Null check operator used on a null value)"
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'beritpage.dart';
import 'donepage.dart';
import 'settingspage.dart';
import 'tinapage.dart';
import 'assmapage.dart';
import 'package:test_app/main.dart';
class TinaPage extends StatelessWidget {
#override
Widget build(BuildContext context) => Scaffold(
backgroundColor: Color(0xFFB1C5AD),
body: Center(
//Aenderung Hermann
child: Column(
children: <Widget>[
SizedBox(
width: 400,
height: 70,
child: Center(
child: Text('Material'),
),
),
SizedBox(
width: 300,
height: 200,
child: Center(
child: Image.asset('assets/T-Shirt.png'),
),
),
SizedBox(
width: 200,
height: 70,
child: Center(
child: Text('Artikel-Nr.: 1062053001 '),
),
),
SizedBox(
height: 30,
),
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: const StadiumBorder(),
backgroundColor: Color(0xFF145245),
),
onPressed: () {
final navigationState = navigationKey.currentState!;
navigationState.setPage(0);
},
child: const Text('Cotton')),
SizedBox(
height: 30,
),
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: const StadiumBorder(),
backgroundColor: Color(0xFF145245),
),
onPressed: () {},
child: const Text('Viskose')),
SizedBox(
height: 30,
),
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: const StadiumBorder(),
backgroundColor: Color(0xFF145245),
),
onPressed: () {},
child: const Text('Elastan')),
],
),
),
);
}
I also tried Navigation.push to another side. but then i lose the Appbar and Buttonbar which are defined in main.dart.
I wanted to press the button "Cotton" and move to "AssmaPage" and see the first icon in Bottombar is highlighted.
I am trying to implement this modalBottomSheet
and I thought to use Stack with negative positioning
showModalBottomSheet(
context: context,
builder: (context) {
return Stack(
alignment: AlignmentDirectional.bottomStart,
children: [
Container(
width: double.infinity,
height: 200,
color: Colors.white,
child: Column(//here there will be the text)
),
Positioned(
top: -20,
left: 0,
right: 0,
child: CircleAvatar(
backgroundColor: Palette.white,
radius: 38,
child: CircleAvatar(
backgroundImage: NetworkImage(snapshot.data.image),
radius: 34,
backgroundColor: Palette.white),
),
)]);
However this cuts the top part of the CircleAvatar picture (as I kind of expected).
Any idea on how to implement this?
you need to change the clipBehavior to Clip.none on the Stack
Stack(
clipBehavior: Clip.none,
...)
Here is my tricky implementation.
Set bottom sheet's background color to transparent.
Add top margin as avatar's half height to base Container.
Set base container's background color to white
Change the avatar's top position value to 0
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(),
floatingActionButton: FloatingActionButton(
onPressed: () {
show();
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
void show() {
showModalBottomSheet(
backgroundColor: Colors.transparent,
context: context,
builder: (context) {
return Stack(
alignment: AlignmentDirectional.bottomStart,
children: [
Container(
width: double.infinity,
height: 200,
margin: EdgeInsets.only(top: 35),
color: Colors.transparent,
child: Container(
padding: EdgeInsets.only(top: 60),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Alessandro Liparoti',
style: TextStyle(
color: Colors.black,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 25),
Text(
'4 games palyed',
style: TextStyle(
color: Colors.grey,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
Positioned(
top: 0,
left: 0,
right: 0,
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 38,
child: CircleAvatar(
backgroundImage: NetworkImage(
'https://image.flaticon.com/icons/png/512/147/147144.png'),
radius: 34,
backgroundColor: Colors.white),
),
),
],
);
});
}
}
I have this piece of code inside a scaffold with SafeArea:
Column(
children: [Flexible(
fit: FlexFit.loose,
child: Container(
// width: 130,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [Icon(Icons.ac_unit), Text("Trending")],
),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey[300]),
),
)]
)
Which gives the following result:
What I want to achieve is this:
How do I make the row warp around the text.
from the documentation
Wrap(
spacing: 8.0, // gap between adjacent chips
runSpacing: 4.0, // gap between lines
children: <Widget>[
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('AH')),
label: Text('Hamilton'),
),
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('ML')),
label: Text('Lafayette'),
),
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('HM')),
label: Text('Mulligan'),
),
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('JL')),
label: Text('Laurens'),
),
],
)
if you want to use that row just do
Row(
mainAxisSize: MainAxisSize.min
children: [
...
])
replace that Chip() with the above row
Edit:
replace the Chip() with that _buildChip() custom widget something like this, It should give you a better control over the widget
import 'package:flutter/material.dart';
main() {
runApp(MaterialApp(
home: MyPage(),
));
}
class MyPage extends StatelessWidget {
Widget _buildChip() {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20), color: Colors.grey.withOpacity(.4) ),
child: InkWell(
highlightColor: Colors.blue.withOpacity(.4),
splashColor: Colors.green,
borderRadius: BorderRadius.circular(20),
onTap: () {
},
child: Container(
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 7),
child: Row(
mainAxisSize: MainAxisSize.min,
children:[
Icon(Icons.ac_unit, size: 14),
SizedBox(width: 10),
Text("Trending")
]),
),
),
);
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Wrap(
spacing: 8.0, // gap between adjacent chips
runSpacing: 4.0, // gap between lines
children: <Widget>[
_buildChip(),
_buildChip(),
_buildChip(),
_buildChip(),
_buildChip(),
],
)
);
}
}
let me know if It is what you want, so that I edit that answer
Take a look at this example. You should be using Wrap and RichText to achieve this design. Not Flexible, because it will take all the available space.
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: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({Key? key, required this.title}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Wrap(children: [
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20), color: Colors.grey[300]),
child: RichText(
text: TextSpan(
children: [
WidgetSpan(
child: Icon(Icons.ac_unit, size: 14),
),
TextSpan(
text: "Trending",
),
],
),
),
),
SizedBox(width: 5,),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20), color: Colors.grey[300]),
child: RichText(
text: TextSpan(
children: [
WidgetSpan(
child: Icon(Icons.ac_unit, size: 14),
),
TextSpan(
text: "Trending",
),
],
),
),
)
]),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
I want to put a custom toolbar on the keypad like the image above. Is it possible in flutter? or should I write code on the iOS or Android side?
You can copy paste run full code below
Please see working demo below
You can use package https://pub.dev/packages/keyboard_overlay
Step 1: Use with HandleFocusNodesOverlayMixin
Step 2: Use FocusNodeOverlay for focusNode
Step 3: Use GetFocusNodeOverlay and set _focusNodeOverlay = GetFocusNodeOverlay(
Step 4: TextField use TextField(focusNode: _focusNodeOverlay,
code snippet
class _MyHomePageState extends State<MyHomePage>
with HandleFocusNodesOverlayMixin {
FocusNodeOverlay _focusNodeOverlay;
#override
void initState() {
_focusNodeOverlay = GetFocusNodeOverlay(
child: TopKeyboardUtil(
Container(
color: Colors.white,
height: 45,
width: MediaQueryData.fromWindow(ui.window).size.width,
child: Row(
children: [
GestureDetector(
child: Icon(Icons.save),
onTap: () => print("click"),
),
...
Spacer(),
Container(
width: 60,
child: Center(
child: DoneButtonIos(
backgroundColor: Colors.white,
textColor: Colors.green,
label: 'Post',
onSubmitted: () {
print("submit");
},
platforms: ['android', 'ios'],
),
),
),
],
),
),
),
);
working demo
full code
import 'package:flutter/material.dart';
import 'package:keyboard_overlay/keyboard_overlay.dart';
import 'dart:ui' as ui;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with HandleFocusNodesOverlayMixin {
FocusNodeOverlay _focusNodeOverlay;
#override
void initState() {
_focusNodeOverlay = GetFocusNodeOverlay(
child: TopKeyboardUtil(
Container(
color: Colors.white,
height: 45,
width: MediaQueryData.fromWindow(ui.window).size.width,
child: Row(
children: [
GestureDetector(
child: Icon(Icons.save),
onTap: () => print("click"),
),
GestureDetector(
child: Icon(Icons.computer),
onTap: () => print("click"),
),
GestureDetector(
child: Icon(Icons.home),
onTap: () => print("click"),
),
Spacer(),
Container(
width: 60,
child: Center(
child: DoneButtonIos(
backgroundColor: Colors.white,
textColor: Colors.green,
label: 'Post',
onSubmitted: () {
print("submit");
},
platforms: ['android', 'ios'],
),
),
),
],
),
),
),
);
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(
focusNode: _focusNodeOverlay,
style: TextStyle(color: Colors.grey),
decoration: InputDecoration(
labelText: 'Type Something',
labelStyle: TextStyle(color: Colors.black),
fillColor: Colors.orange,
hintStyle: TextStyle(
color: Colors.grey,
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.black, width: 1.0),
),
),
),
],
),
),
);
}
}
Yes there is a way around in the flutter to achieve this.
Create a widget of the toolbar you want to add.
Set it visible on input focus.
For reference I am sharing the code how I achieve that.
class InputDoneView extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
color: Style.lightGrey,
child: Align(
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.only(top: 1.0, bottom: 1.0),
child: CupertinoButton(
padding: EdgeInsets.only(right: 24.0, top: 2.0, bottom: 2.0),
onPressed: () {
FocusScope.of(context).requestFocus(new FocusNode());
},
child: Text(
"Done",
style: TextStyle(color: Style.primaryColor,fontWeight: FontWeight.normal)
),
),
),
),
);
}
}
To call this in your main view when input field is focused in and out.
showOverlay(BuildContext context) {
if (overlayEntry != null) return;
OverlayState overlayState = Overlay.of(context);
overlayEntry = OverlayEntry(builder: (context) {
return Positioned(
bottom: MediaQuery.of(context).viewInsets.bottom, right: 0.0, left: 0.0, child: InputDoneView());
});
overlayState.insert(overlayEntry);
}
removeOverlay() {
if (overlayEntry != null) {
overlayEntry.remove();
overlayEntry = null;
}
}
I have two tab. I want elevation bottom of Appbar and elevation bottom of TabBarView. How can I do this?
Here is my Code,
class MyOrder extends StatefulWidget {
#override
_MyOrderState createState() => _MyOrderState();
}
class _MyOrderState extends State<MyOrder> with SingleTickerProviderStateMixin{
var strTitle = Translations.globalTranslations.myOrders;
TabController _tabController;
#override
void initState() {
_tabController = new TabController(length: 2, vsync: this);
super.initState();
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
elevation: 1.0,
leading: new IconButton(
icon: Image.asset('images/keyboard_backspace.png', width: 24.0, height: 24.0,),
onPressed: () => Navigator.of(context).pop(),
),
title: Text(strTitle,textAlign: TextAlign.left , style: UIUtills().getTextStyle(
fontName: AppFontName.appFontSemiBold,
fontsize: 20,
color: AppColor.redColor),),
backgroundColor: Colors.white,
iconTheme: IconThemeData(
color: AppColor.redColor),
bottom: TabBar(
indicatorColor: AppColor.redColor,
labelColor: AppColor.blackColor,
labelStyle: UIUtills().getTextStyle(
fontName: AppFontName.appFontSemiBold,
fontsize: 16,
color: AppColor.blackColor),
tabs: [
new Tab(text:Translations.globalTranslations.pastOrder),
new Tab(text: Translations.globalTranslations.upComing)
],
controller: _tabController,
indicatorSize: TabBarIndicatorSize.tab),
),
body: TabBarView(
children: [
PastOrder(),
UpComingOrder(),
],
controller: _tabController,),
);
}
}
As per my code layout looks like,
https://i.stack.imgur.com/D9BND.png
I want to design my layout like this,
https://i.stack.imgur.com/tPv8A.png
Try this one
ScreenShot https://imgur.com/Fz95DEr
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 8.0, // top bar
leading: InkWell(
onTap: () {},
child: Icon(
Icons.keyboard_arrow_left,
color: Colors.red,
),
),
backgroundColor: Colors.white,
title: Text(
"My Order",
style: TextStyle(color: Colors.red),
),
),
body: Scaffold(
body: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
elevation: 8.0, // bottom bar
bottom: PreferredSize(
child: TabBar(
labelColor: Colors.black,
indicatorColor: Colors.red,
tabs: <Widget>[
Tab(
text: "Past Order",
),
Tab(
text: "Upcoming",
),
],
),
preferredSize: Size.fromHeight(0.0),
),
backgroundColor: Colors.white,
),
body: TabBarView(
children: <Widget>[
Container(
color: Colors.white,
child: Center(
child: Text("Past Order"),
),
),
Container(
color: Colors.white,
child: Center(
child: Text("Upcoming"),
),
),
],
),
),
),
),
);
}
}