1_TextField(文本框)

import 'package:flutter/material.dart';void main() {runApp(MaterialApp(home: MyEditText(),));
}class MyEditText extends StatefulWidget {@overrideMyEditTextState createState() => MyEditTextState();
}class MyEditTextState extends State<MyEditText> {String results = "";final TextEditingController controller = TextEditingController();@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("Using EditText"),backgroundColor: Colors.red,),body: Container(child: Center(child: Column(children: <Widget>[TextField(decoration: InputDecoration(hintText: "Enter text here..."),onSubmitted: (String str) {setState(() {results = results + "\n" + str;});},),Text(results)],),),),);}
}
复制代码

1.1文本框获取值

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Retrieve Text Input',home: MyForm(),);}
}// Define a Custom Form Widget
class MyForm extends StatefulWidget {@override_MyFormState createState() => _MyFormState();
}// Define a corresponding State class. This class will hold the data related to
// our Form.
class _MyFormState extends State<MyForm> {// Create a text controller. We will use it to retrieve the current value// of the TextField!final myController = TextEditingController();@overridevoid dispose() {// Clean up the controller when the Widget is disposedmyController.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Retrieve Text Input'),),body: Padding(padding: const EdgeInsets.all(16.0),child: TextField(controller: myController,),),floatingActionButton: FloatingActionButton(// When the user presses the button, show an alert dialog with the// text the user has typed into our text field.onPressed: () {return showDialog(context: context,builder: (context) {return AlertDialog(// Retrieve the text the user has typed in using our// TextEditingControllercontent: Text(myController.text),);},);},tooltip: 'Show me the value!',child: Icon(Icons.text_fields),),);}
}
复制代码

2_TabBar(选项卡)

import 'package:flutter/material.dart';void main() {runApp(TabBarDemo());
}class TabBarDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: DefaultTabController(length: 3,child: Scaffold(appBar: AppBar(bottom: TabBar(tabs: [Tab(icon: Icon(Icons.directions_car)),Tab(icon: Icon(Icons.directions_transit)),Tab(icon: Icon(Icons.directions_bike)),],),title: Text('Tabs Demo'),),body: TabBarView(children: [Icon(Icons.directions_car),Icon(Icons.directions_transit),Icon(Icons.directions_bike),],),),),);}
}复制代码

2.1_顶部选项卡

import 'package:flutter/material.dart';void main() {runApp(TabBarDemo());
}class TabBarDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: DefaultTabController(length: 3,child: Scaffold(appBar: AppBar(title: Material(color: Colors.blue,child: TabBar(tabs: [Tab(icon: Icon(Icons.directions_car)),Tab(icon: Icon(Icons.directions_transit)),Tab(icon: Icon(Icons.directions_bike)),],),),),body: TabBarView(children: [Icon(Icons.directions_car),Icon(Icons.directions_transit),Icon(Icons.directions_bike),],),),),);}
}
复制代码

2.2_选项卡页面

import 'package:flutter/material.dart';void main() {runApp(TabBarDemo());
}class TabBarDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: DefaultTabController(length: 3,child: Scaffold(appBar: AppBar(title: Material(color: Colors.blue,child: TabBar(tabs: [Tab(icon: Icon(Icons.directions_car)),Tab(icon: Icon(Icons.directions_transit)),Tab(icon: Icon(Icons.directions_bike)),],),),),body: TabBarView(children: [Home1(),Home2(),Home3(),],),),),);}
}class Home1 extends StatelessWidget{@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child:Text('HOME1') ,),);}
}class Home2 extends StatelessWidget{@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child:Text('HOME2') ,),);}
}class Home3 extends StatelessWidget{@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child:Text('HOME3') ,),);}
}
复制代码

3_bottomNavigationBar(底部导航栏)

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Generated App',theme: ThemeData(primarySwatch: Colors.blue,primaryColor: const Color(0xFF2196f3),accentColor: const Color(0xFF2196f3),canvasColor: const Color(0xFFfafafa),),home: MyHomePage(),);}
}class MyHomePage extends StatefulWidget {MyHomePage({Key key}) : super(key: key);@override_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int index=0;List<Widget> pages=[Container(color: Colors.deepOrange),Container(color: Colors.amber),Container(color: Colors.blue),Container(color: Colors.green),];@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('App Name'),),bottomNavigationBar: BottomNavigationBar(type: BottomNavigationBarType.fixed,onTap: (int idx){setState(() {index=idx;});},items: [BottomNavigationBarItem(icon: const Icon(Icons.access_alarm,color: Colors.black),title: Text('Title',style: TextStyle(color: Colors.black)),),BottomNavigationBarItem(icon: const Icon(Icons.star,color: Colors.black),title: Text('Title',style: TextStyle(color: Colors.black)),),BottomNavigationBarItem(icon: const Icon(Icons.pages,color: Colors.black),title: Text('Title',style: TextStyle(color: Colors.black)),),BottomNavigationBarItem(icon: const Icon(Icons.adjust,color: Colors.black),title: Text('Title',style: TextStyle(color: Colors.black)),),]),body:pages[index] ,);}
}
复制代码

3.1_底部导航页面

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.blue,primaryColor: const Color(0xFF2196f3),accentColor: const Color(0xFF2196f3),canvasColor: const Color(0xFFfafafa),),home: MyHomePage(),);}
}class MyHomePage extends StatefulWidget {MyHomePage({Key key}) : super(key: key);@override_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int index=0;List<Widget> pages=[Home1(),Home2(),Home3(),Home4()];@overrideWidget build(BuildContext context) {return Scaffold(bottomNavigationBar: BottomNavigationBar(type: BottomNavigationBarType.fixed,currentIndex: index,fixedColor: Colors.blue,onTap: (int idx){setState(() {index=idx;});},items: [BottomNavigationBarItem(icon: const Icon(Icons.access_alarm),title: Text('Title'),),BottomNavigationBarItem(icon: const Icon(Icons.star),title: Text('Title'),),BottomNavigationBarItem(icon: const Icon(Icons.pages),title: Text('Title'),),BottomNavigationBarItem(icon: const Icon(Icons.adjust),title: Text('Title'),),]),body:pages[index] ,);}
}class Home1 extends StatelessWidget{@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Home1'),),body: Center(child:Text('HOME1') ,),);}
}class Home2 extends StatelessWidget{@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Home2'),),body: Center(child:Text('HOME2') ,),);}
}class Home3 extends StatelessWidget{@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Home3'),),body: Center(child:Text('HOME3') ,),);}
}class Home4 extends StatelessWidget{@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Home4'),),body: Center(child:Text('HOME4') ,),);}
}
复制代码