3_flutter_黑色主题,Listview(列表),GridView(网格)

掘金莫狄
872 阅读3分钟

1_黑色主题

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('黑色主题'),
      ),
    );
  }
}

image.png

1.1_动态黑色主题

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {  
  const MyApp({Key? key}) : super(key: key);
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {  
  bool darkTheme=false;
  @override
  Widget build(BuildContext context) { 
    return MaterialApp(
      theme: darkTheme ? ThemeData.dark() :ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('动态黑色主题'),
        ),

        body: Column(
            children: <Widget>[
    
           ListTile(
             leading: const Icon(Icons.accessibility),
             title: const Text('黑色主题'),
             trailing: Switch(
               value: darkTheme,
           onChanged: (value){
             setState(() {
               darkTheme=value;
             });
           },
         ),
       ),

        ],
    ),
      ),
    );
        
  }
}

2_Listview(列表)

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Generated App',
      theme: ThemeData(
        primaryColor: const Color(0xFF2196f3),
        canvasColor: const Color(0xFFfafafa),
        fontFamily: 'Merriweather', 
        colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.blue).copyWith(secondary: const Color(0xFF2196f3)),
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('App Name'),
      ),
      body: ListView(children: List.generate(10, (idx){
        return Card(child: Container(
          height: 150,
          color: Colors.greenAccent,
          child: Text('$idx'),
        ),);
      }),),
    );
  }
}

2.1基本列表

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    const title = 'Basic List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: ListView(
          children: const <Widget>[
            ListTile(
              leading: Icon(Icons.map),
              title: Text('Map'),
            ),
            ListTile(
              leading: Icon(Icons.photo_album),
              title: Text('Album'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
            ),
          ],
        ),
      ),
    );
  }
}

3_GridView(网格)

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Generated App',
      theme: ThemeData(
        primaryColor: const Color(0xFF2196f3),
        canvasColor: const Color(0xFFfafafa),
        fontFamily: 'Merriweather', 
        colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.blue).copyWith(secondary: const Color(0xFF2196f3)),
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('App Name'),
      ),
      
      body: GridView.count(
        crossAxisCount: 2,
        childAspectRatio: 2/3,
      children: List.generate(100, (idx){
        return Card(child: Container(
          color: Colors.greenAccent,
          child: Text('$idx'),
        ),);
      }),),

    );
  }
}

3.1_网格视图填入内容(图标+文字+图标颜色)

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(   
      home:Scaffold( 
      appBar: AppBar(title: const Text('双行card'),),
body: GridView.count(
      primary: true,
      padding: const EdgeInsets.all(1.0),
      crossAxisCount: 2,
      mainAxisSpacing: 1.0,
      crossAxisSpacing: 1.0,
      children:const <Widget>[
      MyGridView (icon: Icons.home,teks: "欢迎",warnaIcon: Colors.brown,),
      MyGridView (icon: Icons.favorite,teks: "大家",warnaIcon: Colors.pink,),
      MyGridView (icon: Icons.place,teks: "阅读",warnaIcon: Colors.blue,), 
      MyGridView (icon: Icons.settings,teks: "莫狄",warnaIcon: Colors.black,),
      MyGridView (icon: Icons.access_time,teks: "博客",warnaIcon: Colors.yellow,), 
      MyGridView (icon: Icons.accessibility,teks: "谢谢",warnaIcon: Colors.red,),
      MyGridView (icon: Icons.add,teks: "观看",warnaIcon: Colors.green,), 
      MyGridView (icon: Icons.airplay,teks: "！！！",warnaIcon: Colors.teal,),
      ],
    ),
),
    );
 
  }
}

class MyGridView  extends StatelessWidget{
   const MyGridView({Key? key,required this.icon,required this.teks,required this.warnaIcon}) : super(key: key);

  final IconData icon;
  final String teks;
  final Color warnaIcon;

  @override
  Widget build(BuildContext context){
    return Card(
  elevation: 1.5,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    mainAxisSize: MainAxisSize.min,
    verticalDirection: VerticalDirection.down,
    children: <Widget>[
      Icon(icon,
      size: 130.0,
      color: warnaIcon),
      Center(
        child:Text(teks),
      ), 
    ],
  ),
);
  }
}

3.2_点击事件

不要在MaterialApp里面写，分开写

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(   
      home:Scaffold( 
      appBar: AppBar(title: const Text('双行card'),),
      body: const myapp1(),
    ),
    );
 
  }
}

class myapp1 extends StatelessWidget {
  const myapp1({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:GridView.count(
      primary: true,
      padding: const EdgeInsets.all(1.0),
      crossAxisCount: 2,
      mainAxisSpacing: 1.0,
      crossAxisSpacing: 1.0,
      children:  <Widget>[
       InkWell( 
         child:const MyGridView (icon: Icons.home,teks: "欢迎",warnaIcon: Colors.brown,),
    onTap: () { 
        Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondScreen()),
            );
    },),


     InkWell(
          child:const MyGridView (icon: Icons.favorite,teks: "大家",warnaIcon: Colors.pink,),
    onTap: () {
        Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondScreen1()),
            );
    },),


     InkWell(
          child:const MyGridView (icon: Icons.place,teks: "阅读",warnaIcon: Colors.blue,),
    onTap: () {
        Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondScreen1()),
            );
    },),  

      const MyGridView (icon: Icons.settings,teks: "莫狄",warnaIcon: Colors.black,),
      const MyGridView (icon: Icons.access_time,teks: "博客",warnaIcon: Colors.yellow,), 
      const MyGridView (icon: Icons.accessibility,teks: "谢谢",warnaIcon: Colors.red,),
      const MyGridView (icon: Icons.add,teks: "观看",warnaIcon: Colors.green,), 
      const MyGridView (icon: Icons.airplay,teks: "！！！",warnaIcon: Colors.teal,),
      ],
    ),

    );
  }
}

class MyGridView  extends StatelessWidget{
  const MyGridView({Key? key,required this.icon,required this.teks,required this.warnaIcon}) : super(key: key);

  final IconData icon;
  final String teks;
  final Color warnaIcon;

  @override
  Widget build(BuildContext context){
    return InkWell(
    child: Card(
    elevation: 1.5,
 
    child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    mainAxisSize: MainAxisSize.min,
    verticalDirection: VerticalDirection.down,
    children: <Widget>[
      Icon(icon,
      size: 130.0,
      color: warnaIcon),
      Center(
        child:Text(teks),
      ), 
    ],
  ),
),
   );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("新页面"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

class SecondScreen1 extends StatelessWidget {
  const SecondScreen1({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("新页面1"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

3.3_网格视图填入内容(图片+文字)

在pubspec.yaml文件中添加图片路径 

  assets:
  - lib/images/

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(   
      home:Scaffold( 
      appBar: AppBar(title: const Text('双行card'),),
      body: const Myapp1(),
    ),
    );
 
  }
}
class  Myapp1 extends StatelessWidget {
  const Myapp1({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:GridView.count(
      primary: true,
      padding: const EdgeInsets.all(1.0),
      crossAxisCount: 2,
      childAspectRatio: 2/3,
      mainAxisSpacing: 1.0,
      crossAxisSpacing: 1.0,
      children: <Widget>[
       InkWell( 
         child:const MyGridView (image: "capacitor.png",teks: "莫狄"),
    onTap: () { 
        Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondScreen()),
            );
    },),


     InkWell(
          child:const MyGridView (image: "capacitor.png",teks: "莫狄"),
    onTap: () {
        Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondScreen1()),
            );
    },),

     InkWell(
          child:const MyGridView (image: "capacitor.png",teks: "莫狄"),
    onTap: () {
        Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondScreen1()),
            );
    },),  

      const MyGridView (image: "capacitor.png",teks: "莫狄"),
      const MyGridView (image: "capacitor.png",teks: "博客"), 
      const MyGridView (image: "capacitor.png",teks: "谢谢"),
      const MyGridView (image: "capacitor.png",teks: "观看"), 
      const MyGridView (image: "capacitor.png",teks: "！！！"),
      ],
    ),
    );
  }
}
class MyGridView  extends StatelessWidget{
  const MyGridView({Key? key,required this.image,required this.teks}) : super(key: key);

  final String  image;
  final String teks;

  @override
  Widget build(BuildContext context){
    return InkWell(
    child: Card(
    elevation: 1.5,
 
    child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    mainAxisSize: MainAxisSize.min,
    verticalDirection: VerticalDirection.down,
    children: <Widget>[
      Image(image: AssetImage('lib/images/' + image)),
      Center(
        child:Text(teks),
      ), 
    ],
  ),
),
   );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("新页面"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

class SecondScreen1 extends StatelessWidget {
  const SecondScreen1({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("新页面1"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

avatar
文章
阅读
粉丝