flutter Ui - splimter/Flutter GitHub Wiki
return MaterialApp(
theme: ThemeData.dark(),
home: InputPage(),
);
// for more controlle
theme: ThemeData(
primaryColor: Color(0xFF0A0E21),
scaffoldBackgroundColor: Color(0xFF0A0E21),
accentColor: Colors.red,
textTheme: TextTheme(
bodyText1: TextStyle(color: Colors.white),
bodyText2: TextStyle(color: Colors.white),
)
)
appBar: AppBar(
leading: CircleAvatar(child: Text("AB"),),
elevation: 10,
actionsIconTheme: IconThemeData(color: Colors.deepPurple),
title: Text("Title"),
centerTitle: true,
actions: <Widget>[
IconButton(
icon: Icon(Icons.add),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.remove),
onPressed: () {},
),
],
),
Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 200.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("Collapsing Toolbar",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: Image.network(
"https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
fit: BoxFit.cover,
)),
),
];
},
body: Center(
child: Text("Sample Text"),
),
),
)
class _MyHomePage extends State<MyHomePage> {
int _selectedIndex = 0;
void _onItemTap(int value) {
setState(() {
_selectedIndex = value;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.mail),
title: Text('Inbox'),
),
BottomNavigationBarItem(
icon: Icon(Icons.people),
title: Text('Contacts'),
),
BottomNavigationBarItem(
icon: Icon(Icons.calendar_today),
title: Text('Calendar'),
),
],
fixedColor: Colors.deepPurple,
onTap: _onItemTap,
currentIndex: _selectedIndex,
),
body: [
Inbox(),
Contacts(),
Calendar(),
].elementAt(_selectedIndex),
);
}
}
Inbox
, Contacts
and Calendar
are all same.
class Inbox extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Text("This Is Inbox"),
),
);
}
}
// if its a Widget then
onPressed: () {
showModalBottomSheet(context: context, builder: buildBottomSheet);
},
// if its a state[less/full] widget then
builder:(context)=> AddTaskScreen()
Flutter Spinkit, A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit.
// set data to pass
MICardLine('0541233212'),
MICardLine('Mobile Developer'),
// set ctor
final String text;
const MICardLine(this.text, {Key key, }) : super(key: key);
// set data from param
Text(text)
// scratch
Row(
children: <Widget>[
Icon(
icon,
color: Colors.blueGrey[900],
),
SizedBox(
width: 25,
),
Text(text,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
color: Colors.blueGrey[900])),
],
)
// pre-build
ListTile(
leading: Icon(icon),
title: Text(text,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
color: Colors.blueGrey[900])),
)
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
)),
)
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
radius: 50,
backgroundColor: Colors.red,
),
Text('Merah Soheyb',
style:
TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
SizedBox(width: 150,child: Divider(color: Colors.white,),),
MICardLine('0541233212', Icons.phone),
MICardLine('Mobile Developer', Icons.code),
],
),
)
class MICardLine extends StatelessWidget {
final String text;
final IconData icon;
const MICardLine(
this.text,
this.icon, {
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Card(
color: Colors.blueGrey[400],
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 25),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ListTile(
leading: Icon(icon),
title: Text(text,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.blueGrey[900])),
),
),
);
}
}