OLD | NEW |
1 library stocksapp; | 1 library stocksapp; |
2 | 2 |
3 import '../../framework/fn.dart'; | 3 import '../../framework/fn.dart'; |
4 import '../../framework/components/drawer.dart'; | 4 import '../../framework/components/drawer.dart'; |
5 import '../../framework/components/drawer_header.dart'; | 5 import '../../framework/components/drawer_header.dart'; |
6 import '../../framework/components/fixed_height_scrollable.dart'; | 6 import '../../framework/components/fixed_height_scrollable.dart'; |
7 import '../../framework/components/floating_action_button.dart'; | 7 import '../../framework/components/floating_action_button.dart'; |
8 import '../../framework/components/icon.dart'; | 8 import '../../framework/components/icon.dart'; |
9 import '../../framework/components/input.dart'; | 9 import '../../framework/components/input.dart'; |
10 import '../../framework/components/material.dart'; | 10 import '../../framework/components/material.dart'; |
(...skipping 24 matching lines...) Expand all Loading... |
35 margin: 0 4px;''' | 35 margin: 0 4px;''' |
36 ); | 36 ); |
37 | 37 |
38 static Style _titleStyle = new Style(''' | 38 static Style _titleStyle = new Style(''' |
39 flex: 1; | 39 flex: 1; |
40 margin: 0 4px;''' | 40 margin: 0 4px;''' |
41 ); | 41 ); |
42 | 42 |
43 List<Stock> _sortedStocks; | 43 List<Stock> _sortedStocks; |
44 bool _isSearching = false; | 44 bool _isSearching = false; |
| 45 String _searchQuery; |
45 | 46 |
46 StocksApp() : super() { | 47 StocksApp() : super() { |
47 _sortedStocks = oracle.stocks; | 48 _sortedStocks = oracle.stocks; |
48 _sortedStocks.sort((a, b) => a.symbol.compareTo(b.symbol)); | 49 _sortedStocks.sort((a, b) => a.symbol.compareTo(b.symbol)); |
49 } | 50 } |
50 | 51 |
51 void _handleSearchClick(_) { | 52 void _handleSearchClick(_) { |
52 setState(() { | 53 setState(() { |
53 _isSearching = !_isSearching; | 54 _isSearching = !_isSearching; |
54 }); | 55 }); |
55 } | 56 } |
56 | 57 |
| 58 void _handleSearchQueryChanged(query) { |
| 59 setState(() { |
| 60 _searchQuery = query; |
| 61 }); |
| 62 } |
| 63 |
57 Node build() { | 64 Node build() { |
58 var drawer = new Drawer( | 65 var drawer = new Drawer( |
59 animation: _drawerAnimation, | 66 animation: _drawerAnimation, |
60 children: [ | 67 children: [ |
61 new DrawerHeader( | 68 new DrawerHeader( |
62 children: [new Text('Stocks')] | 69 children: [new Text('Stocks')] |
63 ), | 70 ), |
64 new MenuItem( | 71 new MenuItem( |
65 key: 'Inbox', | 72 key: 'Inbox', |
66 icon: 'content/inbox', | 73 icon: 'content/inbox', |
(...skipping 12 matching lines...) Expand all Loading... |
79 children: [new Text('Settings')] | 86 children: [new Text('Settings')] |
80 ), | 87 ), |
81 new MenuItem( | 88 new MenuItem( |
82 key: 'Help & Feedback', | 89 key: 'Help & Feedback', |
83 icon: 'action/help', | 90 icon: 'action/help', |
84 children: [new Text('Help & Feedback')] | 91 children: [new Text('Help & Feedback')] |
85 ) | 92 ) |
86 ] | 93 ] |
87 ); | 94 ); |
88 | 95 |
89 Node title = _isSearching | 96 Node title; |
90 ? new Input(focused: true, placeholder: 'Search stocks') | 97 if (_isSearching) { |
91 : new Text('I am a stocks app'); | 98 title = new Input(focused: true, placeholder: 'Search stocks', |
| 99 onChanged: _handleSearchQueryChanged); |
| 100 } else { |
| 101 title = new Text('I am a stocks app'); |
| 102 } |
92 | 103 |
93 var toolbar = new Toolbar( | 104 var toolbar = new Toolbar( |
94 children: [ | 105 children: [ |
95 new Icon(key: 'menu', style: _iconStyle, | 106 new Icon(key: 'menu', style: _iconStyle, |
96 size: 24, | 107 size: 24, |
97 type: 'navigation/menu_white') | 108 type: 'navigation/menu_white') |
98 ..events.listen('click', _drawerAnimation.toggle), | 109 ..events.listen('click', _drawerAnimation.toggle), |
99 new Container( | 110 new Container( |
100 style: _titleStyle, | 111 style: _titleStyle, |
101 children: [title] | 112 children: [title] |
102 ), | 113 ), |
103 new Icon(key: 'search', style: _iconStyle, | 114 new Icon(key: 'search', style: _iconStyle, |
104 size: 24, | 115 size: 24, |
105 type: 'action/search_white') | 116 type: 'action/search_white') |
106 ..events.listen('click', _handleSearchClick), | 117 ..events.listen('click', _handleSearchClick), |
107 new Icon(key: 'more_white', style: _iconStyle, | 118 new Icon(key: 'more_white', style: _iconStyle, |
108 size: 24, | 119 size: 24, |
109 type: 'navigation/more_vert_white') | 120 type: 'navigation/more_vert_white') |
110 ] | 121 ] |
111 ); | 122 ); |
112 | 123 |
| 124 var list = new Stocklist(stocks: _sortedStocks, query: _searchQuery); |
| 125 |
113 var fab = new FloatingActionButton(content: new Icon( | 126 var fab = new FloatingActionButton(content: new Icon( |
114 type: 'content/add_white', size: 24)); | 127 type: 'content/add_white', size: 24)); |
115 | 128 |
116 return new Container( | 129 return new Container( |
117 key: 'StocksApp', | 130 key: 'StocksApp', |
118 children: [ | 131 children: [ |
119 new Container( | 132 new Container( |
120 key: 'Content', | 133 key: 'Content', |
121 style: _style, | 134 style: _style, |
122 children: [toolbar, new Stocklist(stocks: _sortedStocks)] | 135 children: [toolbar, list] |
123 ), | 136 ), |
124 fab, | 137 fab, |
125 drawer, | 138 drawer, |
126 ] | 139 ] |
127 ); | 140 ); |
128 } | 141 } |
129 } | 142 } |
OLD | NEW |