mirror of
https://github.com/flutter/samples.git
synced 2025-11-12 15:58:32 +00:00
Update web/ samples to work with Flutter SDK (#134)
* add package:http dependency in dad_jokes * add package:http dependency in filipino_cuisine * don't build package:http demos until flutter/flutter#34858 is resolved * update gallery * update github_dataviz * update particle_background * don't build github_dataviz (uses package:http) * update slide_puzzle * update spinning_square * update timeflow * update vision_challenge * update charts * update dad_jokes * update filipino cuisine * ignore build output * update timeflow and vision_challenge * update slide_puzzle * don't commit build/ directory * move preview.png images to assets * fix path url join * update readme * update web/readme.md
This commit is contained in:
194
web/gallery/lib/demo/cupertino/cupertino_text_field_demo.dart
Normal file
194
web/gallery/lib/demo/cupertino/cupertino_text_field_demo.dart
Normal file
@@ -0,0 +1,194 @@
|
||||
// Copyright 2018 The Chromium Authors. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style license that can be
|
||||
// found in the LICENSE file.
|
||||
|
||||
import 'package:flutter/cupertino.dart';
|
||||
|
||||
class CupertinoTextFieldDemo extends StatefulWidget {
|
||||
static const String routeName = '/cupertino/text_fields';
|
||||
|
||||
@override
|
||||
_CupertinoTextFieldDemoState createState() {
|
||||
return _CupertinoTextFieldDemoState();
|
||||
}
|
||||
}
|
||||
|
||||
class _CupertinoTextFieldDemoState extends State<CupertinoTextFieldDemo> {
|
||||
TextEditingController _chatTextController;
|
||||
TextEditingController _locationTextController;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_chatTextController = TextEditingController();
|
||||
_locationTextController = TextEditingController(text: 'Montreal, Canada');
|
||||
}
|
||||
|
||||
Widget _buildChatTextField() {
|
||||
return CupertinoTextField(
|
||||
controller: _chatTextController,
|
||||
textCapitalization: TextCapitalization.sentences,
|
||||
placeholder: 'Text Message',
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(
|
||||
width: 0.0,
|
||||
color: CupertinoColors.inactiveGray,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(15.0),
|
||||
),
|
||||
maxLines: null,
|
||||
keyboardType: TextInputType.multiline,
|
||||
prefix: const Padding(padding: EdgeInsets.symmetric(horizontal: 4.0)),
|
||||
suffix: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 4.0),
|
||||
child: CupertinoButton(
|
||||
color: CupertinoColors.activeGreen,
|
||||
minSize: 0.0,
|
||||
child: const Icon(
|
||||
CupertinoIcons.up_arrow,
|
||||
size: 21.0,
|
||||
color: CupertinoColors.white,
|
||||
),
|
||||
padding: const EdgeInsets.all(2.0),
|
||||
borderRadius: BorderRadius.circular(15.0),
|
||||
onPressed: ()=> setState(()=> _chatTextController.clear()),
|
||||
),
|
||||
),
|
||||
autofocus: true,
|
||||
suffixMode: OverlayVisibilityMode.editing,
|
||||
onSubmitted: (String text)=> setState(()=> _chatTextController.clear()),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildNameField() {
|
||||
return const CupertinoTextField(
|
||||
prefix: Icon(
|
||||
CupertinoIcons.person_solid,
|
||||
color: CupertinoColors.lightBackgroundGray,
|
||||
size: 28.0,
|
||||
),
|
||||
padding: EdgeInsets.symmetric(horizontal: 6.0, vertical: 12.0),
|
||||
clearButtonMode: OverlayVisibilityMode.editing,
|
||||
textCapitalization: TextCapitalization.words,
|
||||
autocorrect: false,
|
||||
decoration: BoxDecoration(
|
||||
border: Border(bottom: BorderSide(width: 0.0, color: CupertinoColors.inactiveGray)),
|
||||
),
|
||||
placeholder: 'Name',
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildEmailField() {
|
||||
return const CupertinoTextField(
|
||||
prefix: Icon(
|
||||
CupertinoIcons.mail_solid,
|
||||
color: CupertinoColors.lightBackgroundGray,
|
||||
size: 28.0,
|
||||
),
|
||||
padding: EdgeInsets.symmetric(horizontal: 6.0, vertical: 12.0),
|
||||
clearButtonMode: OverlayVisibilityMode.editing,
|
||||
keyboardType: TextInputType.emailAddress,
|
||||
autocorrect: false,
|
||||
decoration: BoxDecoration(
|
||||
border: Border(bottom: BorderSide(width: 0.0, color: CupertinoColors.inactiveGray)),
|
||||
),
|
||||
placeholder: 'Email',
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildLocationField() {
|
||||
return CupertinoTextField(
|
||||
controller: _locationTextController,
|
||||
prefix: const Icon(
|
||||
CupertinoIcons.location_solid,
|
||||
color: CupertinoColors.lightBackgroundGray,
|
||||
size: 28.0,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6.0, vertical: 12.0),
|
||||
clearButtonMode: OverlayVisibilityMode.editing,
|
||||
textCapitalization: TextCapitalization.words,
|
||||
decoration: const BoxDecoration(
|
||||
border: Border(bottom: BorderSide(width: 0.0, color: CupertinoColors.inactiveGray)),
|
||||
),
|
||||
placeholder: 'Location',
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildPinField() {
|
||||
return const CupertinoTextField(
|
||||
prefix: Icon(
|
||||
CupertinoIcons.padlock_solid,
|
||||
color: CupertinoColors.lightBackgroundGray,
|
||||
size: 28.0,
|
||||
),
|
||||
padding: EdgeInsets.symmetric(horizontal: 6.0, vertical: 12.0),
|
||||
clearButtonMode: OverlayVisibilityMode.editing,
|
||||
keyboardType: TextInputType.number,
|
||||
autocorrect: false,
|
||||
obscureText: true,
|
||||
decoration: BoxDecoration(
|
||||
border: Border(bottom: BorderSide(width: 0.0, color: CupertinoColors.inactiveGray)),
|
||||
),
|
||||
placeholder: 'Create a PIN',
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTagsField() {
|
||||
return CupertinoTextField(
|
||||
controller: TextEditingController(text: 'colleague, reading club'),
|
||||
prefix: const Icon(
|
||||
CupertinoIcons.tags_solid,
|
||||
color: CupertinoColors.lightBackgroundGray,
|
||||
size: 28.0,
|
||||
),
|
||||
enabled: false,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6.0, vertical: 12.0),
|
||||
decoration: const BoxDecoration(
|
||||
border: Border(bottom: BorderSide(width: 0.0, color: CupertinoColors.inactiveGray)),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return DefaultTextStyle(
|
||||
style: const TextStyle(
|
||||
fontFamily: '.SF UI Text',
|
||||
inherit: false,
|
||||
fontSize: 17.0,
|
||||
color: CupertinoColors.black,
|
||||
),
|
||||
child: CupertinoPageScaffold(
|
||||
navigationBar: const CupertinoNavigationBar(
|
||||
// We're specifying a back label here because the previous page is a
|
||||
// Material page. CupertinoPageRoutes could auto-populate these back
|
||||
// labels.
|
||||
previousPageTitle: 'Cupertino',
|
||||
middle: Text('Text Fields'),
|
||||
),
|
||||
child: CupertinoScrollbar(
|
||||
child: ListView(
|
||||
children: <Widget>[
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 32.0, horizontal: 16.0),
|
||||
child: Column(
|
||||
children: <Widget>[
|
||||
_buildNameField(),
|
||||
_buildEmailField(),
|
||||
_buildLocationField(),
|
||||
_buildPinField(),
|
||||
_buildTagsField(),
|
||||
],
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 32.0, horizontal: 16.0),
|
||||
child: _buildChatTextField(),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user