FLUTTER - UI on [CS scanner]:-
Code:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
title: 'CS Scanner - UI',
home: MyApp(),
));
}
//ONLY UI and colors, Icons may differ
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(),
appBar: AppBar(
backgroundColor: Colors.black12,
actions: <Widget>[
Row(
children: <Widget>[
Container(
padding: EdgeInsets.all(2),
child: Text(
'My Docs',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
PopupMenuButton(
icon: Icon(Icons.arrow_drop_down),
itemBuilder: (context) {},
)
],
),
SizedBox(
width: 80.0,
),
IconButton(
icon: Icon(Icons.search),
onPressed: () {
debugPrint('Serach tapped');
},
),
IconButton(
onPressed: () {
debugPrint('Cloud tapped');
},
icon: Stack(
children: <Widget>[
Icon(Icons.cloud_circle),
Positioned(
child: Icon(
Icons.brightness_1,
color: Colors.red,
size: 10.0,
),
)
],
)),
IconButton(
onPressed: () {
debugPrint('More tapped');
},
icon: Stack(
children: <Widget>[
Icon(Icons.more_vert),
Positioned(
child: Icon(
Icons.brightness_1,
color: Colors.red,
size: 10.0,
),
)
],
)),
],
),
backgroundColor: Colors.white,
body: ListView(
children: <Widget>[
Stack(
children: <Widget>[
Column(
children: <Widget>[
ListView.builder(
shrinkWrap: true,
itemCount: 15,
itemBuilder: (BuildContext context, int index) {
return Column(
children: <Widget>[
ListTile(
leading: Stack(
children: <Widget>[
Container(
height: 70.0,
width: 100.0,
child: Image.asset(
'assets/images/nature.jpg',
fit: BoxFit.fill,
)),
Positioned(
left: 70.0,
top: 40.0,
child: Icon(
Icons.cloud_download,
size: 20.0,
color: Colors.greenAccent,
),
)
],
),
title: Text(
'New Doc 2018-12-03',
style: TextStyle(
fontSize: 20.0,
// fontWeight: FontWeight.bold
),
),
subtitle: Row(
children: <Widget>[
Text('24/11/18 15:50'),
SizedBox(width: 5.0),
Material(
shape: OutlineInputBorder(
borderRadius: BorderRadius.circular(1),
borderSide: BorderSide(
color: Colors.grey, width: 1.0)),
child: Container(
height: 15.0,
width: 20.0,
child: Center(
child: Text(
'2',
style: TextStyle(fontSize: 12.0),
),
),
),
)
],
),
),
Divider(
height: 20.0,
color: Colors.grey,
)
],
);
},
)
],
)
],
)
],
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.green,
onPressed: () {
debugPrint('FAB');
},
child: Icon(Icons.camera_alt),
),
);
}
}
No comments:
Post a Comment