Flutter Components

Configuration:

Question 1:

Running Gradle task ‘assembleDebug’… Not moving for a long time

Flutter installation directory, / packages/flutter_tools/gradle/flutter in the gradle:

1. Private static final String up your MAVEN_REPO = “storage.googleapis.com/download.fl…” ;
2. Changed to a private static final String up your MAVEN_REPO = “mirrors.tuna.tsinghua.edu.cn/flutter/dow…” ;

1. Align the component

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'the ALign components',
      home: Scaffold(
        appBar: AppBar(
          title: Text('the Align components')
        ),
        body: Container(
          width: 200.0,
          height: 300.0./ * ** ALign's widthFactor is invalid when the width of the container is specified
           * 
* /
          / / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
          color: Colors.red,
          child: Align(
            // Alignment
            alignment: Alignment(0.1.0),
            / * ** Alignment. Center = bottomCenter. TopRight
* Alignment: The range of alignment (0,0) ranges from -1.0 to 1.0
* * / 
            / / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
            widthFactor: 3.0.// Double the width (padding the parent container size according to the child component size)
            heightFactor: 4.0.// Double the width (depending on the size of the child component)
            / * ** When the parent container is of uncertain width and height
* If no Container is specified
* * / 
            / / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
            child: Container(
              color: Colors.green,
              width: 100.0,
              height: 50.0,
              child: Text(
                'bottomCentent', style: TextStyle( color: Colors.white ) ) ), ) ) ), ); }}Copy the code

2.AppBar

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'the ALign components',
      home: Scaffold(
        appBar: AppBar(
          title: Text('the Align components') ), body: DemoPage() ), ); }}class DemoPage extends StatefulWidget {
  @override 
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage>{
  @override 
  Widget build(BuildContext context) {
    return SizedBox(
        height: 200.0,
        child: AppBar(
          title: Text('application'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.print), 
              onPressed: null,
              tooltip: 'print',
            ),
            IconButton(
              icon: Icon(Icons.plus_one), 
              onPressed: null,
              tooltip: 'more',
            ),
            IconButton(
              icon: Icon(Icons.share), 
              onPressed: null,
              tooltip: 'sharing'[, [, [, [; }}Copy the code

import 'package:flutter/material.dart';

void main(){
  runApp(
    MyApp()
  );
}

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'the ALign components',
      home: Scaffold(
        appBar: AppBar(
          title: Text('title'),
          // Left icon
          leading: Icon(Icons.home),
          // Background of the entire AppBar
          backgroundColor: Colors.green,
          // Center the title
          centerTitle: true.// Icon on the right
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.share), 
              onPressed: null,
              tooltip: 'sharing',),// Menu button
            PopupMenuButton<String>(
              itemBuilder: (BuildContext content) => <PopupMenuItem<String> > [/ / the menu item
                PopupMenuItem<String>(
                  value: 'friend',
                  child: Text('Share in moments'),
                ),
                PopupMenuItem<String>(
                  value: 'download',
                  child: Text('Download to local'), ) ], ) ], ), body: DemoPage() ), ); }}class DemoPage extends StatefulWidget {
  @override 
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage>{
  @override 
  Widget build(BuildContext context) {
    return SizedBox(
        height: 500,
        child: AppBar(
          title: Text('title'),
          // Left icon
          leading: Icon(Icons.home),
          // Background of the entire AppBar
          backgroundColor: Colors.green,
          // Center the title
          centerTitle: true.// Icon on the right
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.share), 
              onPressed: null,
              tooltip: 'sharing',),// Menu button
            PopupMenuButton<String>(
              itemBuilder: (BuildContext content) => <PopupMenuItem<String> > [/ / the menu item
                PopupMenuItem<String>(
                  value: 'friend',
                  child: Text('Share in moments'),
                ),
                PopupMenuItem<String>(
                  value: 'download',
                  child: Text('Download to local'() [() [() [() [() }}Copy the code

3. BottomAppBar components

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomAppBar components',
      home: Scaffold(
        // FAB button position
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, // Hover in the middle of the bottom
        / / FAB button
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: null,),// Bottom app bar
        bottomNavigationBar: BottomAppBar(
          // The distance between floatingActionButton and BottomAppBar
          notchMargin: 10.0.// Apply the background color at the bottom
          color: Colors.pink,
          child: Row(
            // Set the size
            mainAxisSize: MainAxisSize.max,
            // Alignment
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.menu),
                onPressed: (){},
              ),
              IconButton(
                icon: Icon(Icons.search),
                onPressed: (){},
              )
            ]
          ),
        ),
        body: null)); }}Copy the code

4. The ButtonBar components

@override 
  Widget build(BuildContext context) {
    // End button aligned container
    return Center(
      child: ButtonBar(
        // Alignment defaults to end alignment
        alignment: MainAxisAlignment.end,
        / / the child size
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          RaisedButton(
            child: Text('home'),
            color: Colors.yellowAccent,
            onPressed: null
          ),
          RaisedButton(
            child: Text('release'),
            color: Colors.yellow,
            onPressed: null
          ),
          RaisedButton(
            child: Text('I'),
            color: Colors.yellowAccent,
            onPressed: null))); }Copy the code

5. FlexibleSpace components

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlexibleSpace components',
      home: Scaffold(
        appBar: AppBar(
          title: Text('FlexibleSpace components')
        ),
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
            return <Widget>[
              SliverAppBar(
                // Expand the height
                expandedHeight: 150.0.// Whether to hide with sliding
                floating: false.// Whether it is fixed at the top
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Text(
                    'Foldable component',
                    style: TextStyle(
                      color: Colors.white
                    ),
                    ),
                  background: Image.network('https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1590326522&di=83b46be42e 8b62d86b43ecc4d9731e17&src=http://www.bizhidaquan.com/d/file/1/1159829.jpg')))]; }, body: Center( child: Text('Pull up')))),); }}Copy the code

6. SliverAppBar components

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SliverAppBar components',
      home: Scaffold(
        appBar: AppBar(
          title: Text('SliverAppBar components') ), body: Domes() ), ); }}// Scrollable component
class Domes extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxScrolled){
        return <Widget>[
          SliverAppBar(
            // Whether to reserve the height
            primary: true.// Left icon
            leading: Icon(Icons.hdr_off),
            // Icon on the right
            actions: <Widget>[
              Icon(Icons.add)
            ],
            // Z-shadow
            elevation: 10.0.// True fixed at the top false completely hidden
            pinned: false.// Expandable area height
            expandedHeight: 200.0.// Used together with floating
            snap: false.// Whether to hide the title with sliding
            floating: false.// Extend the area
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text(
                'This is a title.',
                style: TextStyle(
                  color: Colors.yellow,
                  fontSize: 16.0
                )
              ),
              background: Image.network(
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590337388247&di=6637f1e38c9da6fa343735f749080e24&i mgtype=0&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3004831859%2C2611273449%26fm%3D214%26gp%3D0.jpg'),),)]; }, body: Center( child: Text('drag'))); }}Copy the code

7. SnackBar components

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SnackBar components',
      home: Scaffold(
        appBar: AppBar(
          title: Text('SnackBar components') ), body: Domes() ), ); }}// Scrollable component
class Domes extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
        onTap:(){
          final snackBar = SnackBar(
              // Prompt message
              content: Text('Text prompt'),
              / / the background color
              backgroundColor: Colors.green,
              / / operation
              action: SnackBarAction(
                textColor: Colors.white,
                label: 'cancel', 
                onPressed: (){

                }
              ),
              // The duration
              duration: Duration(minutes: 1), / / 1 minutes
          );
          Scaffold.of(context).showSnackBar(snackBar);// final snackBar
        },
        child: Text('Show message at bottom of screen'))); }}Copy the code

8. TabBar component

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TabBar component',
      home: Scaffold(
        appBar: AppBar(
          title: Text('TabBar component') ), body: DemoPage() ), ); }}/ / SingleTickerProviderStateMixin switch (animation) must be used in a stateful components
class DemoPage extends StatefulWidget {
  @override 
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> with SingleTickerProviderStateMixin {
  ScrollController _scrollViewController;
  TabController _tabController;
  
  // Initialization is complete
  @override
  void initState(){
    super.initState();
    _scrollViewController = ScrollController();
    // The length should be the same as the display section
    _tabController = TabController(vsync: this, length: 6);
  }

  // Apply destruction
  @override
  void dispose(){
    super.initState();
    / / destroy
    _scrollViewController.dispose();
   
    _tabController.dispose();
    super.dispose();
  }

  @override 
  Widget build(BuildContext context) {
    // End button aligned container
      return SizedBox(
        height: 500.0,
        child: Scaffold(
          appBar: AppBar(
            title: Text('选项卡'),
            // The front icon
            leading: Icon(Icons.home),
            / / the background color
            backgroundColor: Colors.blue,
            // Title TAB
            bottom: TabBar(
              controller: _tabController,
              // Whether to scroll
              isScrollable: true,
              tabs: <Widget>[
                Tab(
                  text: "Option 1",
                  icon: Icon(Icons.home),
                ),
                Tab(
                  text: "Option 2"
                ),
                Tab(text: "Option 3"),
                Tab(text: "Option 4"),
                Tab(text: "Option 5"),
                Tab(text: "Option 6"),),),// Switch the content
          body: TabBarView(controller: _tabController,
            children: <Widget>[
              Text('option 1'),
              Text('option 2'),
              Text('option 3'),
              Text('option 4'),
              Text('option 5'),
              Text('option 6'() [(), (); }}Copy the code

9. BottomNavigationBar components

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomNavigationBar components',
      home: Scaffold(
        appBar: AppBar(
          title: Text('BottomNavigationBar components')
        ),
        body: Container(
          width: 200.0,
          height: 500.0), bottomNavigationBar: DemoPage(), ), ); }}class DemoPage extends StatefulWidget {
  @override 
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  / / the current Index
  int _currentIndex = 1;
  void _onItemTapped(int index){
    print(index);
    setState(() {
      _currentIndex = index;
    });
  }

  @override 
  Widget build(BuildContext context) {
      return BottomNavigationBar(
        // Bottom button type
        type: BottomNavigationBarType.fixed,  / / fixed fixed
        // Button size
        iconSize: 24.0,
        onTap: _onItemTapped,
        // Current index
        currentIndex: _currentIndex,
        // Select the color
        fixedColor: Colors.red,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            title: Text('chat'),
            icon: Icon(Icons.home)
          ),
          BottomNavigationBarItem(
            title: Text('Address book'),
            icon: Icon(Icons.home)
          ),
          BottomNavigationBarItem(
            title: Text('I'), icon: Icon(Icons.home) ) ] ); }}Copy the code

10. BottomNavigationBar components

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomNavigationBar components',
      home: Scaffold(
        appBar: AppBar(
          title: Text('BottomNavigationBar components')
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              // Add a box of the specified size, with the maximum width and minimum height
              ConstrainedBox(
                constraints: const BoxConstraints(
                  maxHeight: 100.0,
                  minHeight: 20.0,
                  maxWidth: 200.0,
                  minWidth: 60.0
                ),
                child: Container(
                  width: 150.0,
                  height: 100,
                  color: Colors.blue,
                  child: Text(
                    'Width>maxWidth', style: TextStyle( color: Colors.yellow ) ) ), ) ] ) ), bottomNavigationBar: DemoPage(), ), ); }}Copy the code