I need to place the title of expansion tile in the bottom on expanding
this is my code:
ExpansionTile(
title: Text('Colors'),
subtitle: Text('Expand this tile to see its contents'),
// Contents
children: [
ListTile(
leading: CircleAvatar(
backgroundColor: Colors.blue,
),
title: Text('Blue')),
ListTile(
leading: CircleAvatar(
backgroundColor: Colors.red,
),
title: Text('Red')),
ListTile(
leading: CircleAvatar(
backgroundColor: Colors.amber,
),
title: Text('Amber')),
ListTile(
leading: CircleAvatar(
backgroundColor: Colors.pink,
),
title: Text('Pink')),
ListTile(
leading: CircleAvatar(
backgroundColor: Colors.green,
),
title: Text('Green')),
],
),
and this is the result
and this is what im trying to do
That's just not how the expansion tile was designed. :-)
But you can make your own Expansion Tile.
Just as an example, I kinda misused the ExpansionTile widget. You can do it more elegantly by completely designing it withput using ExpansionTile within, but at least it shows how you can do it quite quickly.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: UpsideDownExpansionTile(),
),
),
);
}
}
class UpsideDownExpansionTile extends StatefulWidget {
#override
createState() => _UpsideDownExpansionTileState();
}
class _UpsideDownExpansionTileState extends State<UpsideDownExpansionTile> {
bool expanded = false;
#override
Widget build(BuildContext context) {
return Column(children: [
if (expanded) ...[
ListTile(
leading: CircleAvatar(
backgroundColor: Colors.blue,
),
title: Text('Blue')),
ListTile(
leading: CircleAvatar(
backgroundColor: Colors.red,
),
title: Text('Red')),
ListTile(
leading: CircleAvatar(
backgroundColor: Colors.amber,
),
title: Text('Amber')),
ListTile(
leading: CircleAvatar(
backgroundColor: Colors.pink,
),
title: Text('Pink')),
ListTile(
leading: CircleAvatar(
backgroundColor: Colors.green,
),
title: Text('Green')),
],
ExpansionTile(
title: Text('Colors'),
subtitle: Text('Expand this tile to see its contents'),
onExpansionChanged: (newExpanded) {
setState(() {
expanded = newExpanded;
});
},
// Contents
children: [],
)
]);
}
}
Explanation: The ExpansionTile is just there for the little arrow widget on the right side. It triggers a function on every change. Within this function we set expanded to true or false. And according to this variable, the ListTiles with the colors are either shown or not.
Related
I want to implement navigation drawer in flutter like this screenshot. But don't know how.
Please give me some code hint.
Thank you.
This is the image I like to archive
use the Drawer Widget in scaffold
this is an example from the official documentation
Scaffold(
appBar: AppBar(
title: const Text('Drawer Demo'),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: const <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'Drawer Header',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
leading: Icon(Icons.message),
title: Text('Messages'),
),
ListTile(
leading: Icon(Icons.account_circle),
title: Text('Profile'),
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
),
],
),
),
);
this is the result =>
You have to use the Drawer widget.
Scaffold(
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
ListTile(
title: const Text('Item 1'),
onTap: (){
// do something
},
),
ListTile(
title: const Text('Item 2'),
onTap: (){
// do something
},
),
],
),
),
...
And that's pretty much it! Learn more about Drawer, here.
An easy to archive this is using another Scaffold on body and using drawer there. And to control the drawer use ScaffoldState GlobalKey.
Result
Widget
class _MyApp extends StatefulWidget {
#override
State<_MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<_MyApp> {
static final GlobalKey<ScaffoldState> _key = GlobalKey();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
onPressed: () {
if (_key.currentState != null) {
if (_key.currentState!.isDrawerOpen) {
Navigator.pop(_key.currentContext!);
} else {
_key.currentState!.openDrawer();
}
}
},
icon: const Icon(
Icons.more,
),
),
),
body: Scaffold(
key: _key,
drawer: Drawer(
child: Container(
color: Colors.red,
),
),
body: Column(
children: const [
Text("Child"),
],
),
));
}
}
I'm trying to change the icon and color of my drawer widget in Dart. I've found ways of doing it but none that apply to my scenario. My custom drawer widget is being returned from another class and so I can't change the leading icon in the home class where the app bar is or it will replace my current drawer. I won't show all the code because I don't believe it would be necessary. Any help would be appreciated.
My Current drawer and method of calling it:
Drawer class:
import 'package:flutter/material.dart';
import 'package:new_app/Users.dart';
import '../main.dart';
class MainDrawer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Drawer(
child: Column(
children: <Widget>[
Container(
width: double.infinity,
padding: EdgeInsets.all(20),
color: Theme.of(context).primaryColor,
child: Center(
child: Column(
children: [
Container(
Menu Class/ home page:
import 'screens/drawer_main.dart';
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () {
return new Future(() => false);
},
child: Scaffold(
backgroundColor: Colors.blueGrey[900],
appBar: AppBar(
//backgroundColor: Colors.blueGrey[900],
backgroundColor: Colors.transparent,
automaticallyImplyLeading: true,
title: Text(
"Home Page",
style: TextStyle(color: Colors.white),
),
actions: <Widget>[
//Profile Pic
IconButton(
icon: Icon(Icons.circle, color: Colors.white),
tooltip: 'Comment Icon',
onPressed: () {},
),
MainPopUp(), //IconButton
],
//IconButton
brightness: Brightness.dark,
),
//Current Method of Calling the Drawer:
drawer: MainDrawer(),
body: Center(
Add the leading property in the App Bar and then call the Drawer Widget Programmatically.
Scaffold(
backgroundColor: Colors.blueGrey[900],
appBar: AppBar(
//backgroundColor: Colors.blueGrey[900],
leading: Builder(
builder: (context) => IconButton(
icon: Icon(Icons.menu_rounded),
onPressed: () => Scaffold.of(context).openDrawer(),
),
),
backgroundColor: Colors.transparent,
automaticallyImplyLeading: true,
title: Text(
"Home Page",
style: TextStyle(color: Colors.white),
),
actions: <Widget>[
//Profile Pic
IconButton(
icon: Icon(Icons.circle, color: Colors.white),
tooltip: 'Comment Icon',
onPressed: () {},
),
MainPopUp(), //IconButton
],
//IconButton
brightness: Brightness.dark,
),
//Current Method of Calling the Drawer:
drawer: MainDrawer(),
Add a leading inside AppBar() and open drawer programatically.
AppBar(
leading: InkWell(
child: Icon(
//your preferred icon
Icons.camera
),
onTap: () {
Scaffold.of(context).openDrawer();
},
),
)
I want to locate the ListWheelScrollView to a randomly given index.
While locating, animation of spin must work as well.
How can I locate to a given index?
Edit: It will be like a slot machine.
You can copy paste run full code below
You can use FixedExtentScrollController and call animateToItem
code snippet
final FixedExtentScrollController _controller = FixedExtentScrollController();
...
body: Center(
child: ListWheelScrollView(
controller: _controller,
itemExtent: 80,
magnification: 1.2,
useMagnifier: true,
physics: FixedExtentScrollPhysics(),
children: listtiles, //List of widgets
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_controller.animateToItem(random.nextInt(10),
duration: Duration(milliseconds: 500), curve: Curves.linear);
},
child: Icon(Icons.add),
backgroundColor: Colors.green,
),
working demo
full code
import 'package:flutter/material.dart';
import 'dart:math';
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(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final FixedExtentScrollController _controller = FixedExtentScrollController();
Random random = Random();
List<Widget> listtiles = [
GestureDetector(
onTap: () {
print("clicked 1");
},
child: ListTile(
leading: Icon(Icons.portrait),
title: Text("Portrait"),
subtitle: Text("Beautiful View..!"),
trailing: Icon(Icons.arrow_forward_ios),
),
),
GestureDetector(
onTap: () {
print("clicked 2");
},
child: ListTile(
leading: Icon(Icons.landscape),
title: Text("LandScape"),
subtitle: Text("Beautiful View..!"),
trailing: Icon(Icons.remove),
),
),
GestureDetector(
onTap: () {
print("clicked 3");
},
child: ListTile(
leading: Icon(Icons.map),
title: Text("Map"),
subtitle: Text("Map View..!"),
trailing: Icon(Icons.wb_sunny),
),
),
ListTile(
leading: Icon(Icons.landscape),
title: Text("LandScape"),
subtitle: Text("Wonderful View..!"),
trailing: Icon(Icons.wb_sunny),
),
ListTile(
leading: Icon(Icons.list),
title: Text("List Example"),
subtitle: Text("List Wheel Scroll view .!"),
trailing: Icon(Icons.cloud),
),
ListTile(
leading: Icon(Icons.settings),
title: Text("Settings"),
subtitle: Text("Change the setting..!"),
trailing: Icon(Icons.portrait),
),
ListTile(
leading: Icon(Icons.event),
title: Text("Add data"),
subtitle: Text("Data View..!"),
trailing: Icon(Icons.add),
),
ListTile(
leading: Icon(Icons.landscape),
title: Text("LandScape"),
subtitle: Text("Beautiful View..!"),
trailing: Icon(Icons.wb_sunny),
),
ListTile(
leading: Icon(Icons.email),
title: Text("Email"),
subtitle: Text("Check Email..!"),
trailing: Icon(Icons.arrow_forward),
),
ListTile(
leading: Icon(Icons.games),
title: Text("Games"),
subtitle: Text("Play Games..!"),
trailing: Icon(Icons.zoom_out_map),
),
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("ListView ScrollView Wheel"),
),
body: Center(
child: ListWheelScrollView(
controller: _controller,
itemExtent: 80,
magnification: 1.2,
useMagnifier: true,
physics: FixedExtentScrollPhysics(),
children: listtiles, //List of widgets
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_controller.animateToItem(random.nextInt(10),
duration: Duration(milliseconds: 500), curve: Curves.linear);
},
child: Icon(Icons.add),
backgroundColor: Colors.green,
),
);
}
}
I want my app to have 2 appBars but i don't know how i can add the second one , The first one have this code :
appBar:
AppBar(
title: Text('Tariffo',
style: TextStyle(
color: Colors.white,
fontFamily: 'SignPainter',
fontSize: 45)),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(30),
),
),
actions: <Widget>[
Padding(
padding: EdgeInsets.only(right: 10),
),
IconButton(
icon: Icon(Icons.center_focus_weak),
onPressed: () async {
String scaning = await BarcodeScanner.scan();
setState(() {
qrResult = scaning;
});
},
),
IconButton(
icon: Icon(
Icons.perm_identity,
color: Colors.white,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => UserPage()),
);
}),
And the second one have this code:
appBar: AppBar(title: const Text('Bottom App Bar')),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add), onPressed: () {},),
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 4.0,
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(icon: Icon(Icons.menu), onPressed: () {},),
IconButton(icon: Icon(Icons.search), onPressed: () {},),
],
),
),
);
}
So how can i add the second one to not get an error? Beacuse i tried to erase the first part with appbar: Appbar and i get a lot o errors
Edit:
As Derek pointed out you should not place two Scaffolds in your App.
A different solution could be to place the first AppBar as usual in the appBar property of your Scaffold and the second as a first children in a Column.
This would look like:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text("First appbar"),
),
body: Column(
children: [
AppBar(
backgroundColor: Colors.red,
title: Text("Second appbar"),
),
HomePage()
],
),
),
);
}
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.yellow,
child: Text("Content"),
);
}
}
---------------------------
Old Answer:
Actually this is really simple.
You create your Scaffold in which you put the first AppBar as usual.
As the body of this Scaffold you put a second Scaffold in which you place your second AppBar.
The result would look like:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text("First appbar"),
),
body: Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
title: Text("Second appbar"),
),
),
),
);
}
}
I used drawer in the flutter, and I user end drawer to change the direction the drawer,
but I need also change the direction of drawer item icon to right flutter, how can I do it?
You can achieve this using ListTile widgets
Try this way
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() => runApp( HomeApp());
class HomeApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
theme: new ThemeData(
primarySwatch: Colors.deepPurple,
brightness: Brightness.light,
accentColor: Colors.red),
home: new HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageScreen createState() => _HomePageScreen();
}
class _HomePageScreen extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home"),
),
endDrawer: Drawer(
child: ListView(
padding: EdgeInsets.all(0.0),
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text("Nilesh Rathod"),
accountEmail: Text("nilesh#gmail.com"),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.white,
child: Text("Nilu"),
),
otherAccountsPictures: <Widget>[
CircleAvatar(
backgroundColor: Colors.white,
child: Text("Pilu"),
),
],
),
ListTile(
title: Text("Home"),
trailing: Icon(Icons.new_releases),
),
Divider(),
ListTile(
title: Text("Profile"),
trailing: Icon(Icons.person),
onTap: () => {},
),
Divider(),
ListTile(
title: Text("Tab Layout"),
trailing: Icon(Icons.person),
onTap: () => {},
),
Divider(),
ListTile(
title: Text("Comman View Demo"),
trailing: Icon(Icons.person),
onTap: () => {},
),
Divider(),
ListTile(
title: Text("Close"),
trailing: Icon(Icons.close),
onTap: () => Navigator.of(context).pop(),
),
],
),
),
body: Center(
child: Text("Home Screen"),
),
);
}
}
SAMPLE CODE
Make use of ListTile trailing property
ListTile(
title: Text("text"),
trailing: Icon(Icons.account),
onTap:null,
),